Vue-cli安裝及使用

1.什麼是vue-cli

vue-cli 官方提供的一個腳手架,用於快速生成一個 vue 的項目模板 ;
預先定義好的目錄結構及基礎代碼，就好比咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這 個骨架項目就是腳手架,我們的開發更加的快速;

主要的功能 :

• 統一的目錄結構
• 本地調試
• 熱部署
• 單元測試
• 集成打包上線

需要的環境

• Node.js: https://nodejs.org/zh-cn/download/
  
  下載完，安裝時除了放置位置可以選擇，其它無腦下一步即可
  
  

• Git： https://git-scm.com/downloads
  git官網下載太慢，使用鏡像下載： https://npm.taobao.org/mirrors/git-for-windows/
  

確認nodejs安裝成功

• cmd下輸入 node -v,查看是否能夠正確打印出版本號即可
• cmd下輸入 npm -v, 查看是否能夠正確打印出版本號即可
  這個npm，就是一個軟件包管理工具，就和linux下的apt軟件安裝差不多
  
  cmd儘量使用管理員權限運行
  
  
  

安裝Node，js淘寶鏡像加速器（cnpm）
這樣子的話，下載會快很多

 # -g 就是全局安裝
 npm install cnpm -g
# 或使用如下語句解決npm速度慢的問題
npm install - -registry=https://registry.npm.taobao.org

安裝過程可能有點慢可能需要多試幾次~耐心等待！雖然安裝了cnpm，但是儘量少用

安裝的位置： C:\Users\Administrator（自己的用戶名）\AppDate\Roaming\npm

安裝 vue-cli

cnpm install vue-cli -g 
# 測試是否安裝成功 
# 查看可以基於哪些模板創建 vue 應用程序，通常我們選擇 webpack 

vue list

2.第一個 vue-cli 應用程序

1.創建一個基於 webpack 模板的 vue 應用程序

# 這裏的 myvue 是項目名稱，可以根據自己的需求起名 
vue init webpack myvue 
# 一路都選擇no即可;

說明 :

• Project name：項目名稱，默認 回車 即可
• Project description：項目描述，默認 回車 即可
• Author：項目作者，默認 回車 即可
• Install vue-router：是否安裝 vue-router，選擇 n 不安裝（後期需要再手動添加）
• Use ESLint to lint your code：是否使用 ESLint 做代碼檢查，選擇 n 不安裝（後期需要再手動添 加） S
• et up unit tests：單元測試相關，選擇 n 不安裝（後期需要再手動添加）
• Setup e2e tests with Nightwatch：單元測試相關，選擇 n 不安裝（後期需要再手動添加）
• Should we run npm install for you after the project has been created：創建完成後直接初始 化，選擇 n，
• 我們手動執行;No, I will handle that myself運行結果

3.初始化並運行

cd myvue 
npm install 
npm run dev

注意：npm install要是執行很慢就先執行npm config set registry https://registry.npm.taobao.org這個命令再npm install

執行完成後,目錄多了很多依賴

npm run dev運行

在瀏覽器輸入：http://localhost:8080
效果:

停止：ctrl+c

**idea(管理者身份運行）使用命令npm run dev **

4.Vue-cli目錄結構

• build 和 config：WebPack 配置文件
• node_modules：用於存放 npm install 安裝的依賴文件
• src： 項目源碼目錄
• static： 靜態資源文件
• .babelrc：Babel 配置文件，主要作用是將 ES6 轉換爲 ES5
• .editorconfig：編輯器配置
• eslintignore： 需要忽略的語法檢查配置文件
• .gitignore：git 忽略的配置文件
• .postcssrc.js： css 相關配置文件，其中內部的 module.exports 是 NodeJS 模塊化語法
• index.html： 首頁，僅作爲模板頁，實際開發時不使用
• package.json：項目的配置文件
  • name： 項目名稱
  • version： 項目版本
  • description：項目描述
  • author： 項目作者
  • scripts：封裝常用命令
  • dependencies：生產環境依賴
  • devDependencies： 開發環境依賴

1.src目錄

src 目錄是項目的源碼目錄，所有代碼都會寫在這裏

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 組 件;

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 代碼模板，會替換 < App /> 中的內容
• import HelloWorld from ‘./components/HelloWorld’：引入 HelloWorld 組件用於替換 template 中的 < HelloWorld/>
• export default{…}：導出 NodeJS 對象，作用是可以通過 import 關鍵字導入
  • name: ‘App’：定義組件的名稱
  • components: { HelloWorld }： 子組件
• 在hello,Vue中,關於 < style scoped> 的說明：CSS 樣式僅在當前組件有效，聲明瞭樣式的作用域, 是當前的界面私有的!