一、什么是 vue-cli
????????vue-cli 官方提供的一個(gè)腳手架，用于快速生成一個(gè) vue 的項(xiàng)目模板；預(yù)先定義好的目錄結(jié)構(gòu)及基礎(chǔ)代碼，就好比咱們?cè)趧?chuàng)建 Maven 項(xiàng)目時(shí)可以選擇創(chuàng)建一個(gè)骨架項(xiàng)目，這個(gè)骨架項(xiàng)目就是腳手架，我們的開發(fā)更加的快速;
1.1 主要的功能
? ? ? ? a、統(tǒng)一的目錄結(jié)構(gòu)
? ? ? ? b、本地調(diào)試
? ? ? ? c、熱部署
? ? ? ? d、單元測(cè)試
? ? ? ? e、集成打包上線
1.2 需要安裝的環(huán)境
1.2.1 安裝 node.js
????????官網(wǎng)地址在這，不要下載最新版的，下載這個(gè)版本，要不后面有坑
? ? ? ? 安裝結(jié)束后，在 cmd 下輸入 node -v，查看是否可以正確打印出版本號(hào)即可，
????????在 cmd 下輸入 npm -v，查看是否可以正確打印出版本號(hào)即可，這個(gè) npm 就是一個(gè)軟件包管理管理工具，就和 linux 下的 apt 軟件安裝差不多。
?1.2.2 安裝鏡像加速器
????????需要安裝 node.js 的淘寶鏡像加速器 cnpm，這樣子的話，下載會(huì)快很多，需要使用管理員權(quán)限啟動(dòng) cmd 的命令窗口，否則有時(shí)會(huì)下載不成功。
# -g 就是全局安裝
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
????????由于剛才是全局安裝的，安裝完成之后可以在下面的目錄下看到安裝的東西，有些文如下所示：
?1.2.3 安裝 vue-cli
cnpm install vue-cli -g
# 測(cè)試是否安裝成功
# 查看可以基于哪些模板創(chuàng)建 vue 應(yīng)用程序，通常我們選擇 webpack
vue list
二、第一個(gè) vue-cli 應(yīng)用程序
2.1 創(chuàng)建 myvue 項(xiàng)目
????????1、我們新創(chuàng)建一個(gè)文件夾 vue
????????2、創(chuàng)建一個(gè)基于 webpack 模板的 vue 應(yīng)用程序
# 1、切換到剛才創(chuàng)建的 vue 目錄下
# 2、執(zhí)行下面的命令這里的 myvue 是項(xiàng)目名稱，可以根據(jù)自己的需求起名
vue init webpack myvue
# 3、一路都選擇no即可;Project name：項(xiàng)目名稱，默認(rèn) 回車 即可
Project description：項(xiàng)目描述，默認(rèn) 回車 即可
Author：項(xiàng)目作者，默認(rèn) 回車 即可
Install vue-router：是否安裝 vue-router，選擇 n 不安裝（后期需要再手動(dòng)添加）
Use ESLint to lint your code：是否使用 ESLint 做代碼檢查，選擇 n 不安裝（后期需要再手動(dòng)添加）
Set up unit tests：?jiǎn)卧獪y(cè)試相關(guān)，選擇 n 不安裝（后期需要再手動(dòng)添加）
Setup e2e tests with Nightwatch：?jiǎn)卧獪y(cè)試相關(guān)，選擇 n 不安裝（后期需要再手動(dòng)添加）
Should we run npm install for you after the project has been created：創(chuàng)建完成后直接初始化，選擇 n，我們手動(dòng)執(zhí)行;運(yùn)行結(jié)果!
????????3、切換到我們剛才創(chuàng)建的 myvue 的目錄下，執(zhí)行以下的命令
cd myvue
# 安裝這個(gè)項(xiàng)目的所有依賴環(huán)境
npm install
# 啟動(dòng)項(xiàng)目
npm run dev????????執(zhí)行結(jié)束后，多了很多的依賴
????????安裝并運(yùn)行成功后在瀏覽器輸入 http://localhost:8080
????????效果如下：
2.2 vue-cli 的目錄結(jié)構(gòu)
2.2.1 項(xiàng)目整體目錄
? ? ? ? 使用 idea 打開我們剛才創(chuàng)建的 myvue 項(xiàng)目，項(xiàng)目所展示的目錄結(jié)構(gòu)如下：
? ? ? ? 1、build 和 config：WebPack 配置文件
????????2、node_modules：用于存放 npm install 安裝的依賴文件
????????3、src： 項(xiàng)目源碼目錄
????????4、static：靜態(tài)資源文件
????????5、.babelrc：Babel 配置文件，主要作用是將 ES6 轉(zhuǎn)換為 ES5
????????6、.editorconfig：編輯器配置
????????7、eslintignore：需要忽略的語法檢查配置文件
????????8、.gitignore：git 忽略的配置文件
????????9、.postcssrc.js：css 相關(guān)配置文件，其中內(nèi)部的 module.exports 是 NodeJS 模塊化語法
????????10、index.html：首頁，僅作為模板頁，實(shí)際開發(fā)時(shí)不使用
????????11、package.json：項(xiàng)目的配置文件
? ? ? ? ????????11-1、name：項(xiàng)目名稱
? ? ? ? ????????11-2、version：項(xiàng)目版本
? ? ? ? ????????11-3、description：項(xiàng)目描述
? ? ? ? ????????11-4、author：項(xiàng)目作者
? ? ? ????????? 11-5、scripts：封裝常用命令
? ? ? ? ????????11-6、dependencies：生產(chǎn)環(huán)境依賴
? ? ? ????????? 11-7、devDependencies：開發(fā)環(huán)境依賴?
2.2.2 src 目錄
? ? ? ? src 目錄是項(xiàng)目的源碼目錄，所有代碼都會(huì)寫在這里。
2.2.3 main.js
????????項(xiàng)目的入口文件，我們知道所有的程序都會(huì)有一個(gè)入口，類似于 java 的 main。
// 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 寫法，會(huì)被轉(zhuǎn)換成 require("vue")；（require 是 NodeJS 提供的模塊加載器）
? ? ? ? import App from './App' ：意思同上，但是指定了查找路徑 ./ 為當(dāng)前目錄
? ? ? ? Vue.config.productionTip = false ：關(guān)閉瀏覽器控制臺(tái)關(guān)于環(huán)境的相關(guān)提示
? ? ? ? new Vue({...}) ：實(shí)例化 Vue
? ? ? ? ????????el: '#app' ：查找 index.html 中 id 為 app 的元素
????????????????components: { App } ：引入上面定義的 App 組件組件
? ? ? ? ????????template: '</App>' ：引入 App 組件的 <template>模板
2.2.4 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>
????????1、template：HTML 代碼模板，會(huì)替換 < App /> 中的內(nèi)容
????????2、import HelloWorld from './components/HelloWorld'：引入 HelloWorld 組件用于替換 template中的 < HelloWorld/>
????????3、export default{...}：導(dǎo)出 NodeJS 對(duì)象，作用是可以通過 import 關(guān)鍵字導(dǎo)入
? ? ? ? ????????3-1、name: 'App'：定義組件的名稱
????????????????3-2、components：?{ HelloWorld }：定義子組件
????????4、在 helloVue 中，關(guān)于 < style scoped> 的說明：CSS 樣式僅在當(dāng)前組件有效，聲明了樣式的作用域，是當(dāng)前的界面私有的。
三、安裝 Webpack
? ? ? ? webpack 是一款模塊加載器兼打包工具，他能把各種資源，如：JS、JSX、ES6、SASS、
LESS、圖片等都作為模塊來處理和使用。
?3.1 安裝
npm install webpack -g
npm install webpack-cli -g????????測(cè)試是否安裝成功：
npm webpack -v
npm webpack-cli -v3.2 使用 webpack
????????1、創(chuàng)建項(xiàng)目 webpack-study，空的就可以
????????2、在項(xiàng)目中創(chuàng)建一個(gè)moudles 的目錄，用于存放 js 模塊等靜態(tài)資源
????????3 、在 moudles 下創(chuàng)建模塊文件，如 hello.js，用于編寫 JS 模塊相關(guān)代碼
// 暴露一個(gè)方法
exports.sayHi = function (){
document.write("<h1>我長(zhǎng)的快</h1>");
};????????4、在 modules 下創(chuàng)建一個(gè)名為 main.js 的入口文件，用于打包時(shí)設(shè)置 entry 屬性
var hello = require("./hello");
hello.sayHi();????????5、在項(xiàng)目目錄下創(chuàng)建 webpack.config.js 配置文件，使用 webpack 命令打包
module.exports={
entry:'./modules/main.js',
output:{
filename:'./js/bundle.js'
}
}? ? ? ? 6、在控制臺(tái)運(yùn)行 webpack 命令，會(huì)生成一個(gè) dist 文件夾，里面就會(huì)有生成的 bundle.js 文件。
????????7、在項(xiàng)目目錄下創(chuàng)建 HTML 頁面，如 index.html，導(dǎo)入 webpack 打包后的 js 文件?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>????????8、此時(shí)整個(gè)目錄的文件結(jié)構(gòu)如下所示：
????????9、運(yùn)行 html 看效果
文章來源：http://www.zghlxwxcb.cn/news/detail-628826.html
3.3 說明
????????可以在執(zhí)行 webpack 命令的時(shí)候添加 watch 參數(shù)，用于實(shí)時(shí)監(jiān)聽變化，但是一般不這么用文章來源地址http://www.zghlxwxcb.cn/news/detail-628826.html
webpack --watch到了這里，關(guān)于第一個(gè) vue-cli 項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
