VueRouter路由VueCLI脚手架和模块化开发之VueCLI2.x脚手架工具基于webpacksimple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目   

vue-cli是一个基于vue.js进行快速开发的完整系统。基于webpack构建，并进行默认配置，可通过插件扩展，可升级； vue-cli帮我们创建基本项目结构，跳过繁琐的项目配置环节，将精力集中在业务上；

vue-cli的版本：

• @vue/cli 3.x版本：点击前往官网
• 
• vue-cli 2.x版本：点击前往官网

  安装vue-cli

$ npm install -g vue-cli

 安装成功，查看其版本：

 使用webpack-simple创建一个项目：

创建的项目：

package.json:

按照给与的提示进行运行项目：

 在浏览器中出现该页面，说明项目创建成功：

 解析一下生成的项目目录：

将App.vue内容修改为：

 1 
 8 
 9 
19 
20 

App.vue

在浏览器中显示的效果：

 项目目录：

 webpack.config.js:

 在项目目录中并没有build.js,但是项目中却引入了：

使用该指令就可以生成build.js:npm run build

 Vue-CLI 2.x脚手架工具基于webpack模板构建项目

webpack，全面的模板：包含webpack、vue-loader设置、热加载、语法检查、测试；

• 语法检查：ESLint：统一项目的代码规范，命名、缩进、空格、制表符、标点符号等，可以套用预设，也可以自行修改规则；
• 官网：点击前往

使用webpack进行创建项目：

由于创建项目安装的内容比较多，需要耐心等待

只需在src文件夹下进行开发项目即可：

生成的项目：

 运行项目：

在浏览器中的效果：

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目