vue腳手架vue-cli

一.什麼是腳手架

腳手架是一個構建工具,用來構建一個項目基本的目錄結構,vue項目是基於webpack基礎的

vue-cli 是一個官方發佈 vue.js 項目腳手架，使用 vue-cli 能夠快速建立 vue 項目

二.使用vue cli腳手架的場景

當咱們要開啓一個新的vue項目時,第一件事就是建基本的目錄結構,爲了可以搭建一個具備完整打包功能的目錄結構,咱們採用vue官方提供的,這就須要咱們在node的環境下進行安裝

三.vue腳手架的安裝步驟以及使用

1.全局安裝npm i -g vue-cli

2.經過vue命令初始化一個帶有webpack模板的項目結構:

vue init webpack projectName
複製代碼

初始化過程一些配置選項參考

Project name                            ：默認
Project description                     ：默認
Author                                  ：默認
Vue build                               ：選擇 Runtime + Compiler
Install vue-router?                     ：Y
Use ESLint to lint your code?           ：Y 選擇 Standard
Set up unit tests                       ：n
Setup e2e tests with Nightwatch?        : n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM
複製代碼

3.進入項目目錄

cd projectName
複製代碼

4.運行項目

npm run dev/npm start
複製代碼

5.點擊運行後客戶端提供的URL便可以打開項目的首頁

若是咱們想要執行npm run dev命令後自動打開項目首頁,須要手動修改目錄中package.json文件的script節點的dev屬性,在原來的基礎上添加--open參數便可

"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js"
複製代碼

四.注意事項

1..咱們使用腳手架構建vue項目時候,只須要修改src目錄的內容便可

2.去公司之後,拿到項目,第一件事情就是:

npm run dev/npm start
複製代碼

3.初始化項目報錯

• 清除 npm 緩存文件：npm cache clean --force

4.如何關閉 ESLint 代碼風格校驗

• 在 config/index.js 中將 useEslint 設置爲 false

5.自定義 ESLint 校驗規則

• 在 .eslintrc.js 中添加 'space-before-function-paren': 'off' 關閉 方法名字後的空格校驗規則
• 前提：若是使用了老師的 VScode 配置（ prettier ）

6.目錄結構的總結

• 只須要在 src 目錄中寫 Vue 代碼便可，其餘的目錄暫時不要動它

7.src 目錄結構的說明

/assets           放置資源文件，好比：圖片、css
/components       放項目中全部的組件
/router           路由配置
App.vue           根組件
main.js           項目的入口文件，Vue實例就是在這個文件中建立的
複製代碼

8.Vue 不一樣構建版本的說明

• 1 完整版（運行時+編譯器）

• 2 運行時（體積比完整版小 30%）

• 3 import Vue from 'vue' 默認導入的是：運行時版本

• 4 若是要使用完整版，須要在 webpack 中添加一個 alias 配置才能夠

  build/webpack.base.conf.js 中 resolve 的 alias

// 完整版：
new Vue({
  el: '#app',
  router,

// 腳手架生成的項目中，默認採用完整版（運行時+編譯器）
  components: { App },
  template: '<App/>'
})
複製代碼

// 運行時版：
const vm = new Vue({
  el: '#app',
  data: {},

  render: c => c(App)
})
複製代碼

9.@符號的說明

• 在 vue cli 生成的項目中 @ 符號就表示 src 路徑

五.如何添加一個新的功能

添加一個login模塊

• 1 在 components 中新建一個文件夾（login），在文件中建立組件(Login.vue)
• 2 在 router/index.js 中導入組件（Login.vue）
• 3 配置路由規則