（Vue笔记）VSCode创建与运行 Vue-cli + @Vue-cli 项目

电竞丶小松哥

已于 2022-06-22 18:26:49 修改

阅读量3k

点赞数 16

分类专栏： Vue笔记文章标签：前端 vue Vue-cli vscode npm

于 2022-06-22 18:20:59 首次发布

ZSAndroid

本文链接：https://blog.csdn.net/qq_39038178/article/details/125409947

版权

Vue笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue-cli构建和运行Vue项目，包括Vue-cli2和Vue-cli3的版本区别，以及项目的初始化、依赖安装和启动过程。同时，文章提供了Vue项目的基本目录结构解析，帮助理解每个部分的作用。最后，对可能出现的问题和解决方案进行了说明。

摘要由CSDN通过智能技术生成

3、@Vue-cli构建Vue项目

3.1、开始构建

3.2、运行项目

4、总结

1、创建前提

已全局中安装vue-cli2 脚手架构建工具，右击“以管理员身份运行”运行Windows PoweShell

（1）Vue-cli < 3.0版本（不推荐，推荐使用Vue-cli > 3.0版本）

安装Vue-cli < 3.0版本命令：“cnpm install -g vue-cli” 或 “npm install -g vue-cli”

卸载Vue-cli < 3.0版本命令：“cnpm uninstall vue-cli -g”或“npm uninstall vue-cli -g”

查询Vue-cli < 3.0版本号命令：“vue -V”

（2）Vue-cli > 3.0版本（推荐）

安装Vue-cli > 3.0版本命令：“cnpm install @vue/cli -g” 或 “npm install @vue/cli -g”

卸载Vue-cli > 3.0版本命令：“cnpm uninstall @vue-cli -g”或“npm uninstall @vue-cli -g”

查询Vue-cli > 3.0版本号命令：“vue -V”

接下来就开始使用@vue/cli来构建项目

2、Vue-cli构建Vue项目

2.1、开始构建

（1）创建Vue项目存放路径：在桌面创建“VueProject”空目录。

（2）右击“以管理员身份运行”运行Windows PoweShell，cd命令进入到“VueProject”目录中——>备注，本人使用普通cmd权限，创建提示权限错误，无法访问。

（3）初始化vue并取项目名——>键入“vue init webpack vuedemo01”——>在“VueProject”目录中生成“vuedemo01”文件夹。注意：不能含有大写字母，否则无法进行vue项目初始化操作。

整个Vue项目的目录结构：

* build：最终发布的代码存放位置。

* config：配置路径、端口号等信息，刚开始学习时选择默认配置。

* node_modules：npm加载项目所需的各种依赖模块。

* src：开发主要目录(源码)，基本要做的事都在这个目录里，里面包含几个目录及文件：

assets：放置图片(根据图片大小分类进行base64命名还是其他方式命名)，如logo等
components：目录里放的是一个个的组件文件
router/index.js：配置路由的地方
App.vue：项目入口组件（根组件），我们也可以将组件写这里。
components目录：主要作用是将自定义组件通过它与页面建立联系进行渲染，里面<router-view/>必不可少。
main.js ：项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

* static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

* test：初始测试目录，可删除

* .babelrc：是检测es6语法的配置文件，例：适配哪些浏览器的限制

* .editorconfig：对代码进行规范，建议定义这个规范。

* .gitignore：上传到服务器忽略哪些文件的配置

* .postcssrc.js：前缀的配置 (css转化的配置)

* index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码或页面的重置样式等。

* package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息(大概版本)。

* package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息(具体版本).

* README.md：项目的说明文件。

* webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

注意：以下两个文件不生成在vue项目中，因为在初始化选择Eslint为“No”

.eslintrc.js：配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

.eslintignore：忽略eslint对项目某些文件的语法规则的检查

（4）安装项目所需依赖资源：此时项目还只是一个结构框架，整个项目需要的依赖资源都还没有安装。

右击“以管理员身份运行”运行Windows PoweShell，cd命令进入到“vuedemo01”项目中——> cd C:\Users\ZSAndroid\Desktop\VueProject\vuedemo01

安装项目所需依赖包+插件(可在package.json中查看依赖清单)——>键入“cnpm install”

补充：

（1）npm install ：安装依赖或插件到node_modules目录，安装之前先检查node_modules目录中是否已存在所需依赖或插件。若存在，不下载，本机加载使用，不远再远程下载新资源。

（2）npm install --force / npm install -f ：强制重新安装依赖或插件，不论是否安装。