vue-cli脚手架快速搭建vue单文件项目

迷南。 2023-07-10 08:37 46阅读 0赞

#### 什么是vue-cli ? ####

vue-cli是Vue.js官方脚手架命令行工具，我们可以用它快速搭建Vue.js项目，vue-cli最主要的功能就是初始化项目，既可以使用
    官方模板，也可以使用自定义模板生成项目，而且从2.8.0版本开始，vue-cli 新增了build命令，能让你零配置启动一个Vue.js应用。

###### 全局安装vue-cli ######

`1.安装npm包管理工具`

首先我们需要安装好npm包管理工具，npm是Node.js的默认包管理工具，通过npm可以安装、共享分发代码，管理项目依赖关系。

`2.打开命令行工具`

cmd、git bash、powershel(win10系统shift+鼠标右键打开)
    以下步骤使用的都是cmd

`3.安装vue-cli`

方法一：npm install -g @vue/cli  全局安装使用npm
    方法二：yarn global add @vue/cli  局部安装使用yarn
    方法三：cnpm install -g @vue/cli
    （该步骤安装时间有点长）

截图：  
![在这里插入图片描述][20200301171644496.png]  
`4.检查脚手架是否安装成功`

vue -V (注意：这里的V是大写的，或者vue --version也可以)
    如果出现版本号就说明安装成功了

截图：  
![在这里插入图片描述][20200301185314630.png]

###### 搭建Vue项目 ######

`5.创建项目文件夹`

vue create demo
    cd demo

`6.选择脚手架`

上下按键选择，选择Manually select features，然后回车
    （注意：不要选default默认配置选项

截图：  
![2020030117211421.png][]  
`7.选择项目所需的功能`

空格选中babel (可以在项目中使用ES5、ES6、ES7语法)
    空格选中Router (可以在项目中使用路由)
    空格选中Vuex (Vue的状态管理模式)
    空格选中CSS Pre-process（CSS预处理）
    空格选中linter/Formatter (代码格式化)
    
    以上选项选中之后回车

截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70]  
`8.路由是否默认模式`

yes --> 回车

`9.选择CSS预处理`

注意：这里要选择Sass/SCSS(with dart-sass) --> 空格选中 -->回车

截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 1]  
`10.选择代码检查工具`

空格选中ESlint + Standart config (标准配置) --> 回车

截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 2]  
`11.选择语法检查方式`

空格选中 Lint on save (一保存就检查代码是否符合规范)
    空格选中 Lint and fix on commit (执行命令npm run lint时自动更正错误的代码格式)
    --> 回车
    （尽量两个都选上，养成一种遵循代码规范的习惯）

截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 3]  
`12.选择配置保存的位置`

空格选中In dedicated config files(把配置放在默认独立的文件里面)
    --> 回车

截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 4]  
`13.下一次配置使用使用本次的配置`

yes --> 回车 (不是必须)

`14.给该配置取个名`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 5]  
`15.配置完毕，慢慢等待下载完成吧`  
截图：  
![在这里插入图片描述][20200301173301662.png]  
![在这里插入图片描述][20200301173450871.png]  
`16.注意：如果在选择CSS预处理的时候不小心选择了Sass.SCSS(with node-sass)，有一次不就的机会`

进入到项目的根目录demo --> 打开命令行工具cmd --> 执行命令：cnpm install --save node-sass

`17.运行项目`

方法一：
    在项目根目录demo下打开命令行工具(或者直接使用Vscode的终端比较方便些) --> 执行命令：npm run serve
    方法二：
    修改package.json文件的“scripts”脚本：“serve”改为“start”
    在项目根目录demo下打开命令行工具 --> 执行命令：npm start

截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 6]  
或者：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 8]  
此时项目已经运行起来啦！

`18.浏览器打开`

此时项目已经运行起来啦，浏览器访问localhost:8080

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 9]  
`19.此时就可以写项目啦！！！`

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

参考文献  
vue官网：[https://cn.vuejs.org/][https_cn.vuejs.org]

[20200301171644496.png]: https://img-blog.csdnimg.cn/20200301171644496.png
[20200301185314630.png]: https://img-blog.csdnimg.cn/20200301185314630.png
[2020030117211421.png]: https://img-blog.csdnimg.cn/2020030117211421.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301172253216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020030117240173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200301172458693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200301172549473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200301172647956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200301173140585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[20200301173301662.png]: https://img-blog.csdnimg.cn/20200301173301662.png
[20200301173450871.png]: https://img-blog.csdnimg.cn/20200301173450871.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200301173807943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200301174301706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200301174405197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200301183419322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L214ZjEyM18=,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org]: https://cn.vuejs.org/