Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于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内容修改为：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
   
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '欢迎来到perfect*的博客园'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

在浏览器中显示的效果：

 项目目录：

 webpack.config.js:

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

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

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

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

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

使用webpack进行创建项目：

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

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

生成的项目：

 运行项目：

在浏览器中的效果：