Vue-cli構建spa應用

 2.1 VUE-cli構建spa應用

• npm install -g vue-cli

• Vue init webpack-simple demo

• vue init webpack demo2

若是在項目目錄裏能夠用npm i vue -g -S來安裝，而後若是用script標籤引用的話就是script src ="node_modules/vue/dist/vue.js"來引用vue

Vue-cli 腳手架安裝

cnpm i -g vue-cli

安裝完了能夠在項目目錄裏執行shell腳本

vue init webpack-simple demo

按照要求輸入適當的回答而後就會在目錄裏建立一個demo文件夾，裏面就能夠有項目了。

要運行項目就要用shell腳本進入項目目錄裏，運行npm run dev。可是運行不起來是要報錯的。緣由是由於沒有安裝相應的依賴。

因此須要執行cnpm i，等裝完了就好了,運行npm run dev就能夠跑起來了。

3.vue配置介紹

按照上面的套路新建一個ImoocMall的項目

> vue init webpack imoocmall
//一堆配置，eslint NO
//E2E NO
>cnpm i
​

而後就新建好了一個項目

 

•  

   

  • 這個是打包好的配置的文件夾

 

•  

  • config是上面的webpack的配置

 

•  

  • src是開發項目的源碼

 

•  

  • App.vue是一個入口組件，main.js是項目入口。另外vue結尾的都是一個vue組件

   

•  

  • static放的是靜態資源

 

•  

  • 這個是ES6解析的一個配置。

•  

  • 編譯器的一個配置

•  

  • 忽略git上傳文件的配置

•  

  • html添加前綴的一個配置

•  

  • 單頁面的入口

•  

  • 項目的基本配置，npm i 是照着這個裝的

•  

•  

  • 這兩個能夠合成一個，可是SPA想作一個清晰地架構，因此把他們拆開了。這兩個是配置的核心部分

•  

  • Build.js是用來構建生產用的包，就是整個bundle.js和一個index.html

•  

  • chalk是一個shell語法高亮的插件

  • Semver是一個版本檢查工具，若是有依賴須要Node版本比較高，如今版本不夠時候他會提醒

• 通常該文件的時候都是直接改index.js的配置。再就是改webpack.base的文件

•  

   

  • 對於這種直接引用到目錄的require，通常都是指目錄底下的index.js文件。若是沒有index.js會報錯的。

•  

   

  • 用在成產的配置，有各類插件，其中有個HTMLWEBPACKPLUGIN插件是將打包的東西自動放到index.html失中的插件