Vue环境搭建

摘抄自：

一、环境搭建

1、.安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如果出现相应的版本号，则说明安装成功。

2、安装淘宝镜像，打开命令行工具，输入以下命令，安装完成之后输入cnpm -v，如果出现相应的版本号，则说明安装成功。

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

3、安装webpack，打开命令行工具输入，安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。

npm install webpack -g

4、安装vue-cli脚手架构建工具，打开命令行工具输入，安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功

npm install vue-cli -g

二、构建项目

1.使用以下命令 ， 搭建vue项目, “vue-demo” 是你的项目名称。

vue init webpack vue-demo

2.配置说明

$ vue init webpack vue-demo                                ---------------------  这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template.     ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice)    ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project)  ---------------------项目描述
? Project description A Vue.js project
? Author Datura   --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)  --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started:  --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev

3. 以上步骤完成之后，项目目录结构如下图所示，其中的src目录下的文件，就是我们自己需要使用到的文件了

4.启动项目，输入：npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”

5.安装UI框架--element UI

cnpm i element-ui -S

6.安装各种依赖包，如安装sass的依赖包等