Vue2.0搭建Vue脚手架（vue-cli）

我的qq 2038373094

疑惑

1、vue为什么要用node.js？

2、vue为什么用webpack？

3、vue-cli脚手架又是什么？

解答

---

node.js是方便前后端分离的一种技术，这个一般后端的人用，因为，后端不懂前端，前端人员不懂后端，除非是全栈工程师，不然的话，无法实现前后端分离，一旦前端出错，问题很难解决！

webpack是打包工具，可以把一个个组件文件打包成js，这个样的好处是代码整洁

开始部署的第一步  node.js的安装

1、首先安装node.js

官网https://nodejs.org/en/download/

安装教程：都是直接下一步(安装位置可以变更一下)

测试是否安装成功，windows+r  输入node -v和node --version

 

3.安装cnpm

npm的国内镜像—cnpm

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

 

 

第二步、安装vue-di脚手架

npm install vue-cli –g       

 这个图是之前的，应该是npm install vue-cli -g   千万不能用cnpm，我吃了太多亏了，删文件把系统都蓝屏了

 

 查看是否安装成功  vue -V 

出现版本号就说明没有问题

 

 第三步、安装webpack

cnpm install webpack -g

如下图所示

 等待安装结束，查看是否安装成功

webpack -v

 

如果没有出现版本号，而是出现如下

还需要安装GLI的，输入yes,等待这个安装结束，再输入webpack -v就会出现版本号了

 

第四步  创建一个基于webpack模板的新项目

拿我的举个例子

通过 cmd命令，进入d盘

vue init webpack vscode   这个vscode是文件夹的名称（事先不存在的，不能是中文）

 

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好
Project name (my-app) # 项目名称（我的项目）
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）
注：当然这些都看你自己个人的情况

 

 

第五步、运行项目   （进入到vscode   目录下）

输入命令 cnpm run dev

 结束以后，会出现http地址，在浏览器上输入，出现vue的图片就是成功的！

 

 

 

 

 

第六步、在vscode里面打开vscode 文件夹

 安装vetur

 

---

打开package.json，可以看到一大堆命令如npm run dev 说明以上配置都是没有问题的了！