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

系统管理员 2022-02-04 15:43 232阅读 0赞

### 我的qq 2038373094 ###

### ***疑惑*** ###

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

2、vue为什么用webpack？

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

### ***解答*** ###

--------------------

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

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

![20190508072214440.png][]

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

> **1、首先安装node.js**
> 
> 官网[https://nodejs.org/en/download/][https_nodejs.org_en_download]
> 
> 安装教程：都是直接下一步(安装位置可以变更一下)
> 
> 测试是否安装成功，windows+r  输入node -v和node --version

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

**3.安装cnpm**

**npm的国内镜像—cnpm**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

### *** *** ###

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

npm install vue-cli –g

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

![20190508113122913.png][]

*** 查看是否安装成功  vue -V ***

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

![20190508135538587.png][]

### *** *** ###

### *** 第三步、安装webpack*** ###

cnpm install webpack -g

如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

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

webpack -v

![2019050813584055.png][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

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

拿我的举个例子

通过 cmd命令，进入d盘

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好
    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）
    注：当然这些都看你自己个人的情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

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

输入命令 cnpm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9][]

** 安装vetur**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10][]

--------------------

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11][]

[20190508072214440.png]: /images/20220204/4692fcff2fe64fc68020cbbb251e4655.png
[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220204/db8e976dffe94a20ade4e92092afcbbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220204/688826eee43f485db2f392e4acd30963.png
[20190508113122913.png]: /images/20220204/6dbafb66a0b9486fbcf3839f375c5d2b.png
[20190508135538587.png]: /images/20220204/4457d0683b9c4b94ac10a62f9d8fdffc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220204/1449645cb6f14e46a26ab46d875eec1f.png
[2019050813584055.png]: /images/20220204/a3fa2a3aab824e51ac8b99c1ee69c8b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220204/5af6072cffbc4a508b407aeea6e9a351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20220204/a85028d5f3574288b32720c53f647e4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20220204/df670e25ead143729007a70b5a784543.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6]: /images/20220204/b274defd64954f968439732c837d7566.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 7]: /images/20220204/961a82fb54644bcdb43feaf69695257e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 8]: /images/20220204/4e25de0b23b446b99e9e31575e8097fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 9]: /images/20220204/2fbd457300ca418fb3b941f0d9da9e4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 10]: /images/20220204/43202482c7934e848b477a8d3b2f5409.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 11]: /images/20220204/81394881474f43f486fad5e4f24b83ed.png