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

目录

1、创建前提

2、Vue-cli构建Vue项目

        2.1、开始构建

        2.2、运行项目

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目录：主要作用是将自定义组件通过它与页面建立联系进行渲染，里面必不可少。
• 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、总结

仅自己学习记录，如有错误，敬请谅解~，谢谢~~~