Version: Next

13. Vue CLI 脚手架

  • Vue CLI的优势——完整的前端项目

    • 通过vue-cli搭建交互式项目脚手架，例如我们需要bootstrap,css,js，通过执行命令行方式下载相关依赖，类似于maven

    • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。一个字快

    • 一个运行时依赖 (@vue/cli-service)，该依赖：

      • 可升级；一条命令
      • 基于 webpack 构建，并带有合理的默认配置； 项目打包方式：获取编译好的项目源码，部署服务器
      • 可以通过项目内的配置文件进行配置；默认配置文件
      • 可以通过插件进行扩展。v-charts图标，element-ui

    • 一个丰富的官方插件集合，集成了前端生态中最好的工具 NodeJs Vue VueRouter webpack yarn

    • 一套完全图形化的创建和管理 Vue.js 项目的用户界面

13.1 Vue CLI安装

环境准备

  • 安装NodeJs 验证安装，进入终端node -v

    npm——node package manager:

    • maven——管理java后端以来 远程仓库 阿里云镜像
    • npm——管理前端系统依赖 远程仓库 淘宝镜像

    更换淘宝镜像，上网搜索一堆

  • 安装Vue CLI

    • -g：npm全局安装
    npm install -g vue-cli

13.2 Vue CLI使用

创建Vue脚手架项目

  • 进入要创建前端项目的目录
vue init webpack <project-name>
  • 命令行交互
    1. Project Name (project1)? 确定项目名字
    2. Project description 生成项目描述
    3. Author 作者
    4. Vue build
    5. Install vue-router? 安装vue路由
    6. Use ESLint to lint your code? 选n
    7. Set up unit tests? 选n
    8. Setup e2e tests with nightwatch ? 选n
    9. 选包管理，选NPM

运行：

npm start

image-20200514222151120

项目结构：

  • build——webpack打包使用的build依赖
  • config——用来配置整个项目
  • node_modules——NodeJs依赖
  • src——书写Vue源代码
    • assets——存放静态资源 *
    • components——书写Vue组件 *
    • router—— 配置路由 *
    • App.vue——项目根组件 *
    • main.js——项目主入口 *
  • static——其他静态资源
  • .babelrc——将EC6语法转为ES5执行 ...略
  • index.html——项目主页
  • package.json——类似于maven的pom.xml，不建议手动修改
  • package-lock.json——package.json的锁文件

13.3 Vue CLI 项目开发方式

一切皆组件

  • Vue CLI的开发方式是开发一个个组件对应一个业务功能模块，日后可以将多个组件组合到一起，形成一个前端系统
  • 使用Vue CLI不再使用HTML文件，编写的是一个个.vue组件，打包时Vue cli会将组件编译成HTML文件
  • main.js——程序主入口
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //在页面中引入Vue.js
import App from './App' // 引入自定义组件
import router from './router' //引入vue route js
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', //Vue全局实例
router, // 注册路由对象
components: { App }, // 注册App组件
template: '<App/>'
})
  • ./router/index.js——定义所有路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
  • App.vue——根组件、主入口组件
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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;
}
</style>
  • ./components/helloWorld.vue——主页面展示的内容
<template>
<div class="hello">
<h1>{ { msg } }</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

在Components目录下定义新的组件