Vue: 第一個Vue-cli項目

什麼是vue-cli

vue-cli 官方提供的一個腳手架,用於快速生成一個 vue 的項目模板;

預先定義好的目錄結構及基礎代碼，就比如我們在建立 Maven 項目時能夠選擇建立一個骨架項目，這個骨架項目就是腳手架,咱們的開發更加的快速;

主要的功能:

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

須要的環境

1. Node.js : http://nodejs.cn/download/

　安裝就無腦下一步就好,安裝在本身的環境目錄下

2. Git : https://git-scm.com/downloads

　鏡像:https://npm.taobao.org/mirrors/git-for-windows/

確認nodejs安裝成功:

• cmd 下輸入 node -v,查看是否可以正確打印出版本號便可!
• cmd 下輸入 npm-v,查看是否可以正確打印出版本號便可!

這個npm,就是一個軟件包管理工具,就和linux下的apt軟件安裝差很少!

安裝 Node.js 淘寶鏡像加速器（cnpm）

這樣子的話,下載會快不少~

# -g 就是全局安裝

npm install cnpm -g

# 或使用以下語句解決 npm 速度慢的問題

npm install --registry=https://registry.npm.taobao.org

安裝過程可能有點慢~,耐心等待!雖然安裝了cnpm,可是儘可能少用!

安裝的位置:C:\Users\Administrator\AppData\Roaming\npm 這個是系統自動放到這個目錄中，即便你安裝nodejs時指定了目錄，這個目錄是須要的系統環境，每一個軟件都會有

安裝 vue-cli

 

第一個 vue-cli 應用程序

1. 建立一個Vue項目,咱們隨便創建一個空的文件夾在電腦上,我這裏在D盤下新建一個目錄

　　D:\Project\vue-study;

2. 建立一個基於 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 不安裝（後期須要再手動添加）
• 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，咱們手動執行;運行結果!

 

初始化並運行

在項目路徑下，執行如下命令

　　npm install

　　npm run dev

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

 

 安裝並運行成功後在瀏覽器輸入：http://localhost:8080

 

效果

Vue-cli目錄結構

 咱們用IDEA,open剛纔的項目!

 

• 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：開發環境依賴

src 目錄

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

main.js

項目的入口文件，咱們知道全部的程序都會有一個入口

• 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: '<App/>'：模板，會將 index.html 中 <div id="app"></div> 替換爲 <App />
  • components: { App }：引入組件，使用的是 import App from './App' 定義的 App 組件;

App.vue

• template：HTML 代碼模板，會替換 <App /> 中的內容
• import HelloWorld from './components/HelloWorld'：引入 HelloWorld 組件，用於替換 template 中的 <HelloWorld/>

• export default{...}：導出 NodeJS 對象，做用是能夠經過 import 關鍵字導入

  • name: 'App'：定義組件的名稱
  • components: { HelloWorld }：定義子組件

　　在hello,Vue中,關於 <style scoped> 的說明：CSS 樣式僅在當前組件有效，聲明瞭樣式的做用域,是當前的界面私有的!