1Vue介绍环境搭建项目运行

Posted 2021-02-07 kiven-zhou

1、Vue介绍

Vue和Angular、React都是前端框架，特点：

1、单页面框架；

2、基于模块化组件化的开发模式；

3、Vue简单 灵活 高效 国内的中小企业里面用的非常多。

2、开发环境搭建

1、必须要先安装nodejs（自带NPM工具）

https://cn.vuejs.org/v2/guide/installation.html

安装后，命令行验证安装情况：

 

2、搭建vue的开发环境 ，安装vue的脚手架工具vue-clie 官方命令行工具

npm install --global vue-cli 

或者

安装淘宝镜像，安装成功后 用 cnpm 替代 npm 命令即可；

cnpm install --global vue-cli （此命令只需要执行一次）

3、安装webpack打包工具

cnpm install webpack -g

4、创建项目 必须cd到对应的一个项目里面
vue init webpack vue-demo01

cd vue-demo01
cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 

cnpm install / npm install

注意：vue init webpack xx项目，会有自动调用npm安装依赖，可以选择手工通过cnpm install 完成，速度更快；
5、另一种创建项目的方式 （推荐） ***

vue init webpack-simple vuedemo02

cd vuedemo02

cnpm install / npm install
6、运行项目，
npm run dev

运行成功的界面如下：

 

这样就可以在浏览器中访问http://localhost:8080。