Vue腳手架的搭建

Vue提供了一個官方的CLI，爲單頁面應用（SPA）快速搭建繁瑣的腳手架。

Vue CLI官方文檔  =>  https://cli.vuejs.org/zh/guide/

  1、基本安裝    

1. 安裝指令  npm i @vue/cli -g

2. 檢查是否安裝或者版本   vue --version

3. 建立vue項目  vue create vue-app

在安裝的時候選擇手動，而後根據需求進行選擇配置，後期也能夠本身建立一個vue.config.js文件進行配置修改。

好比：在安裝時，選擇了標準嚴格模式(ESLint + Standard config)，在腳手架中建立一個vue.config.js文件，文件裏面輸入如下代碼，表示將其關閉，具體配置可參考官方文檔。

1 module.exports = {
2   lintOnSave: false
3 }

4. 進入項目 cd vue-app

咱們能夠在package.json文件裏，"scripts"添加如下內容

 5. 而後命令行 npm start

  2、基本使用  

 package.json文件包含了全部的插件的配置信息。src文件夾裏的APP.vue是整個項目的根組件，將項目路由出口固定在這裏；與之對應的main.js文件爲全局的、啓動項目的核心文件。也以在全局本身建立一個vue.config.js文件，做爲整個項目的配置文件。

src文件夾裏，assets文件夾表明項目的資源，好比項目所需圖片等等；components文件夾裏放的是單一頁面中所用的全部小組件；router文件夾index.js文件寫入的是整個項目的路由；store文件夾裏的index.js文件爲vuex相關文件；views文件夾裏放的是項目中單一頁面視圖的組件。

（1）APP.vue文件裏將路由出口設置在這裏

 （2）在main.js文件中引入全部主要文件，這裏引入的都爲全局文件。

 Vue.config.productionTip = false  表示關閉生產模式下給的提示。

（3）在Home.vue文件

 （3）router下的index.js路由文件

 （4）新組件的建立與設置

 (4.1)讓新組件在About.vue組件的路由中顯示

 (4.1.1)在About.vue組件設置子路由出口