（Vue笔记）VSCode创建与运行 Vue-cli + @Vue-cli 项目
（Vue笔记）VSCode创建与运行 Vue-cli + @Vue-cli 项目
目录
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 ：强制重新安装依赖或插件，不论是否安装。
2.2、运行项目
添加vuedemo01项目到VSCode中
选择终端(T)——>运行任务...——>npm——>npm:start
注意：如果执行任务出现：“logfile could not be created: Error: EPERM: operation not permitted”，就是Nodejs安装时创建的node_global+node_cache+node_modules，没有授权。
！！！再次执行任务 ！！！
3、@Vue-cli构建Vue项目
3.1、开始构建
右击“以管理员身份运行”运行Windows PoweShell，cd命令进入到“VueProject”目录中，然后执行“vue create vuedemo02”——>vuedemo02为自定义项目名
3.2、运行项目
添加vuedemo02项目到VSCode中
选择终端(T)——>运行任务...——>npm——>npm:serve
4、总结
仅自己学习记录，如有错误，敬请谅解~，谢谢~~~
前往低代码交流专区
更多推荐
16
0- 0
已为社区贡献1条内容
所有评论(0)