Vue-cli 應用程序
1、什麼是 vue-cli
vue-cli 官方提供的一個腳手架（預先定義好的目錄結構及基礎代碼，咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳手架,如下圖的 Maven 骨架選擇：
2、主要功能
- 統一的目錄結構
- 本地調試
- 熱部署
- 單元測試
- 集成打包上線
3、環境配置
使用 vue-cli，需要在 node 環境下。
3.1 安裝 node.js
官網下載地址：http://nodejs.cn/download
查看是否安裝成功
node -v
3.3 安裝 Node.js 淘寶鏡像加速器（cnpm）
npm install cnpm -g
我們一般使用 npm，因爲使用 cnpm 安裝也可以，但是有時候顯示安裝成功，但是使用不了的情況。而當 npm 不能安裝的時候，就使用 cnpm
3.4 安裝 vue-cli
npm install vue-cli -g
其中，-g 爲全局的意思
查看是否安裝成功
webpack -v
或
vue list
4、基於 Webpack 模板的 vue-cli 應用程序
# 這裏的 myvue 是項目名稱，可以根據自己的需求起名
vue init webpack myvue
說明
- Project name：項目名稱，默認 回車 即可
- Project description：項目描述，默認 回車 即可
- Author：項目作者，默認 回車 即可
- Install vue-router：是否安裝 vue-router，選擇 n 不安裝（後期需要再手動添加）
- Use ESLint to lint your code：是否使用 ESLint 做代碼檢查，選擇 n 不安裝（後期需要再手動添加）
- Set up unit tests：單元測試相關，選擇 n 不安裝（後期需要再手動添加）
- Setup e2e tests with Nightwatch：單元測試相關，選擇 n 不安裝（後期需要再手動添加）
- Should we run npm install for you after the project has been created：創建完成後直接初始化，選擇 n，我們手動執行
5、初始化並運行
cd myvue
npm install
npm run dev
.注：如果 npm run dev 失敗的話，將項目文件中的 node_modules 文件夾及其子文件全部刪除，再重新執行命令。
安裝並運行成功後在瀏覽器輸入：http://localhost:8080
6、vue-cli 目錄結構
- build 和 config：WebPack 配置文件
- node_modules：用於存放 npm install 安裝的依賴文件
- src： 項目源碼目錄
- static：靜態資源文件
- .babelrc：Babel 配置文件，主要作用是將 ES6 轉換爲 ES5
- .editorconfig：編輯器配置
- .gitignore：git 忽略的配置文件
- .postcssrc.js：css 相關配置文件，其中內部的 module.exports 是 NodeJS 模塊化語法
- index.html：首頁，僅作爲模板頁，實際開發時不使用
- package.json：項目的配置文件
- name：項目名稱
- version：項目版本
- description：項目描述
- author：項目作者
- scripts：封裝常用命令
- dependencies：生產環境依賴
- devDependencies：開發環境依賴
7、 vue-cli src 目錄
7.1 src
src 目錄是項目的源碼目錄，所有代碼都會寫在這裏。
7.2 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'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
- import Vue from ‘vue’：ES6 寫法，會被轉換成 require(“vue”); （require 是 NodeJS 提供的模塊加載器）
- import App from ‘./App’：意思同上，但是指定了查找路徑，./ 爲當前目錄
- Vue.config.productionTip = false：關閉瀏覽器控制檯關於環境的相關提示
- new Vue({…})：實例化 Vue
- el: ‘#app’：查找 index.html 中 id 爲 app 的元素
- template: ‘’：模板，會將 index.html 中 替換爲
- components: { App }：引入組件，使用的是 import App from ‘./App’ 定義的 App 組件
7.3 App.vue
組件模板
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</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>
- template：HTML 代碼模板，會替換 中的內容
- import HelloWorld from ‘./components/HelloWorld’：引入 HelloWorld 組件，用於替換 template 中的
- export default{…}：導出 NodeJS 對象，作用是可以通過 import 關鍵字導入
- name: ‘App’：定義組件的名稱
- components: { HelloWorld }：定義子組件
7.4 HelloWorld.vue
基本同上，不解釋…
至此，vue-cli 搭建的項目已完成了初始化，接下來就是在此基礎上進行項目的完善。