SPA項目搭建及嵌套路由

Vue-cli:

什麼是vue-cli?

vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的項目模板，建立命令以下：
vue init webpack xxx

注1：xxx 爲本身建立項目的名稱
注2：必須先安裝vue,vue-cli，webpack，node等一些必要的環境

安裝vue-cli

打開cmd

在node-v10.15.3-win-x64\node_global下執行如下命令：
npm install -g vue-cli
npm install -g webpack

安裝成功後會出現如下文件：

vue
vue.cmd
vue-init
vue-init.cmd
vue-list
vue-list.cmd

查看是否安裝成功：

vue -V（注意這裏是大寫的「V」）

使用腳手架vue-cli(2.X版)來構建項目

cmd:

切換目錄：

vue init webpack spa1 （項目名）

注1：cmd命令行窗口顯示中文亂碼，可能是由於cmd命令行窗口字符編碼不匹配致使
修改cmd窗口字符編碼爲UTF-8，命令行中執行：chcp 65001
切換回中文：chcp 936
這兩條命令只在當前窗口生效，重啓後恢復以前的編碼。

注2：「一問一答」模式
1.Project name：項目名，默認是輸入時的那個名稱spa1，直接回車
2.Project description：項目描述，直接回車
3.Author：做者，隨便填或直接回車
4.Vue build：選擇題，通常選第一個
4.1Runtime + Compiler: recommended for most users//運行加編譯，官方推薦，就選它了
4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files
- render functions are required elsewhere//僅運行時，已經有推薦了就選擇第一個了
5.Install vue-router：是否須要vue-router，Y選擇使用，這樣生成好的項目就會有相關的路由配置文件
6.Use ESLint to lint your code：是否用ESLint來限制你的代碼錯誤和風格。N 新手就不用了，但實際項目中通常都會使用，這樣多人開發也能達到一致的語法
7.Set up unit tests：是否安裝單元測試 N
8.Setup e2e tests with Nightwatch?：是否安裝e2e測試 N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself //選擇題：選第一項「Yes, use NPM」是否使用npm install安裝依賴

所有選擇好回車就進行了生成項目，出現以下內容表示項目建立完成
# Project initialization finished!

運行完上面的命令後，咱們須要將當前路徑改變到SPA這個文件夾內，而後安裝須要的模塊

cd 　　spa1 #改變路徑到spa1文件夾下
npm install　　 #安裝全部項目須要的npm模塊

：啓動並訪問項目

npm run dev

使用HBuilderX打開項目

在config目錄下的index.js修改端口號防止端口衝突

  原端口號：port: 8080

中止項目添加element-ui模塊

cd spa1
npm install element-ui -S

package.json詳解
每一個項目的根目錄下面，通常都有一個package.json文件，定義了這個項目所須要的各類模塊，
以及項目的配置信息（好比名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，
自動下載所需的模塊，也就是配置項目所需的運行和開發環境
詳情見資料「package-詳解.json」中的相關注釋

npm install/npm install xxx -S/npm install xxx -D/npm install xxx -g的區別

npm install
下載「package.json」中dependencies和devdependencies中配置的全部依賴模塊，並保存到項目的node_modules目錄

注1：在git clone項目的時候，項目文件中並無node_modules文件夾，爲何呢？

npm install xxx -g
全局安裝，下載依賴模塊，並保存到%node_home%\node_global\node_modules目錄下

npm install xxx -S
寫入到package.json的dependencies對象，並保存到項目的node_modules目錄

npm install xxx -D
寫入到package.json的devDependencies對象，並保存到項目的node_modules目錄

vue項目結構說明

build文件夾 這個文件夾主要是進行webpack的一些配置
webpack.base.conf.js webpack基礎配置,開發環境,生產環境都依賴
webpack.dev.conf.js webpack開發環境配置
webpack.prod.conf.js webpack生產環境配置
build.js 生產環境構建腳本
vue-loader.conf.js 此文件是處理.vue文件的配置文件

config文件夾
dev.env.js 配置開發環境
prod.env.js 配置生產環境
index.js 這個文件進行配置代理服務器，例如：端口號的修改

node_modules文件夾 存放npm install時根據package.json配置生成的npm安裝包的文件夾

src文件夾 源碼目錄(開發中用得最多的文件夾)
assets 共用的樣式、圖片
components 業務代碼存放的地方，裏面分紅一個個組件存放，一個頁面是一個組件，一個頁面裏面還會包着不少組件
router 設置路由
App.vue vue文件入口界面
main.js 對應App.vue建立vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置

static文件夾 存放的文件不會通過webpack處理，能夠直接引用，例如swf文件若是要引用能夠在webpack配置
對swf後綴名的文件處理的loader，也能夠直接將swf文件放在這個文件夾引用

package.json 這個文件有兩部分是有用的：scripts 裏面設置命令以及在dependencies和devDependencies中，
分別對應全局下載和局部下載的依賴包

vue 文件

vue 文件，是一個自定義的文件類型，用相似HTML的語法描述一個Vue組件。
每一個.vue文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>。
這三個部分分別表明了 html,js,css。

嵌套路由：

核心代碼：

 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutLingerqi from '@/components/AboutLingerqi'
import AboutWebSite from '@/components/AboutWebSite'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
	{
	  path: '/Home',
	  name: 'Home',
	  component: Home
	},
	{
	  path: '/About',
	  name: 'About',
	  component: About,
	  children:[
		  {
		    path: '/AboutLingerqi',
		    name: 'AboutLingerqi',
		    component: AboutLingerqi
		  },
		  {
		    path: '/AboutWebSite',
		    name: 'AboutWebSite',
		    component: AboutWebSite
		  }
	  ]
	}
	
  ]
})

 

　

 

　　

效果演示：