Vue-CLI 項目搭建

0829自我總結

Vue-CLI 項目搭建

一.環境安裝

• 安裝node

官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
#路徑最好要修改用默認就好

• 安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
#這個東西主要用來換源否則你後面下載會很慢,全部的npm均可以用npm來代替

• 安裝腳手架

cnpm install -g @vue/cli
或者
npm install -g @vue/cli

• 清空緩存處理

npm cache clean --force
#在前面這個安裝的時候安裝老是失敗的狀況下能夠嘗試清下緩存接着安裝

二.項目的建立

• 建立項目

vue create 項目名
// 要提早進入目標目錄(項目應該建立在哪一個目錄下)
// 選擇自定義方式建立項目，選取Router, Vuex插件
//這裏面呢回車別按太快,空格是勾選,回車是下一步

• 建立項目中的選項簡介

  #第一次出現的選項
  default (babel, eslint)
  Manually select features #通常不選默認設置

  • default爲系統默認
  • Manually select features爲自定義

  #第二次出現
  #空格勾選,回車下一步
  (*) Babel    #咱們在VUe中通常都用ES6語法寫的,這個插件功能很強大通常都選的把ES5語法解析成ES6       
  ( ) TypeScript      #也是種語法js的升級版,臉書蠻推薦這個語法的,學這個蠻貴的
  ( ) Progressive Web App (PWA) Support #前臺優化的一個功能集合,提升前臺項目效率
  (*) Router #先後端交互中ajax交互來達成先後端分離,這個就是前臺的路由
  (*) Vuex #Vue中父組件與子子組件傳遞消息,設置成全局的單例來方便消息傳遞
  ( ) CSS Pre-processors #若是選了後面他會讓你選你用less或者sass中其中某個作預處理
  (*) Linter / Formatter  #規範編碼格式
  ( ) Unit Testing  #測試相關
  ( ) E2E Testing     #測試相關
  #通常勾選這四個,其它具體狀況具體分析

  後面就一直回車就行了,最後結束時候選擇'N

• 啓動/中止項目

npm run serve //運行
ctrl+c   //退出
// 要提早進入項目根目錄

• 打包項目

目錄結構

dist: 打包的項目目錄(打包後會生成)
node_modules: 項目依賴
public: 共用資源
src: 項目目標,書寫代碼的地方
    -- assets:資源
    -- components:組件
    -- views:視圖組件
    -- App.vue:根組件
    -- main.js: 入口js
    -- router.js: 路由文件
    -- store.js: 狀態庫文件
vue.config.js: 項目配置文件(沒有能夠本身新建)

若是別人須要拷貝項目只須要拷貝src便可其它不須要拷過去,拷過去也不必定生效,

要從新安裝一下依賴npm install

項目目錄結構

|vue-proj
|   |src
|   |   |components  小組件
|   |   |   |Nav.vue
|   |   |views  頁面組件
|   |   |   |PageFirst.vue
|   |   |   |PageSecond.vue
|   |   |App.vue  根組件
|   |   |router.js  安裝vue-router插件的腳本文件 - 配置路由的

• README的解讀

# my_vue

## Project setup
​```
npm install  #安裝環境依賴
​```

### Compiles and hot-reloads for development
​```
npm run serve #啓動項目
​```

### Compiles and minifies for production
​```
npm run build #項目打包
​```

### Run your tests
​```
npm run test #運行測試腳本
​```

### Lints and fixes files
​```
npm run lint #執行代碼規範檢測
​```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).