文章內容參考: https://www.cnblogs.com/chenleideblog/p/10432375.html
Vue項目的創建
使用圖形界面創建Vue項目
# 安裝vue
npm install -g @vue/cli
# 進入DOS終端
vue ui
# 自定義創建項目
...
Vue目錄分析
以下就項目文件夾中的各文件的作用進行介紹：
├── build/ # Webpack 配置目錄
├── dist/ # build 生成的生產環境下的項目
├── config/ # Vue基本配置文件，可以設置監聽端口，打包輸出等
├── node_modules/ # 依賴包，通常執行npm i會生成
├── src/ # 源碼目錄（開發的項目文件都在此文件中寫）
│ ├── assets/ # 放置需要經由 Webpack 處理的靜態文件，通常為樣式類文件，如css，sass以及一些外部的js
│ ├── components/ # 公共組件
│ ├── filters/ # 過濾器
│ ├── store/ # 狀態管理
│ ├── routes/ # 路由，此處配置項目路由
│ ├── services/ # 服務（統一管理 XHR 請求）
│ ├── utils/ # 工具類
│ ├── views/ # 路由頁面組件
│ ├── App.vue # 根組件
│ ├── main.js # 入口文件
├── index.html # 主頁，打開網頁后最先訪問的頁面
├── static/ # 放置無需經由 Webpack 處理的靜態文件，通常放置圖片類資源
├── .babelrc # Babel 轉碼配置
├── .editorconfig # 代碼格式
├── .eslintignore # （配置）ESLint 檢查中需忽略的文件（夾）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）在上傳中需被 Git 忽略的文件（夾）
├── package.json # 本項目的配置信息，啟動方式
├── package-lock.json # 記錄當前狀態下實際安裝的各個npm package的具體來源和版本號
├── README.md # 項目說明（很重要，便於其他人看懂）
我們以后用到最多的就是src文件夾，因為我們編寫的代碼要放在里面
在根目錄下存在index.html文件
在src目錄下存在main.js，App.vue以及在router文件夾下存在index.js
index.html---主頁，項目入口
index.html為項目訪問的首站點，一般我們之定義一個空的根節點，在main.js里面定義的實例將掛載到根節點下，內容都通過vue組件來進行填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首頁title</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue---根組件
我們在Vue中要經常建立后綴名為.vue的文件，.vue的文件通常由三部分構成，分別用
<template>
<!-- 組件代碼區域-->
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
// 這里用於定義Vue組件的業務邏輯
export default {
data: (){ // 私有數據
return {}
},
methods: {}, //處理函數
},
// ...其他業務邏輯
</script>
<!--scoped 的作用: 防止樣式組件之間的沖突,作用域:當前文件-->
<style scoped>
樣式代碼區域
</style>
我們可以將上述三個部分理解為原來我們學習前端的html，javascript與css三個部分。
補充：
【template】
其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如上圖，父節點為#app的div，其沒有兄弟節點）
打一個比喻吧，
【script】
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命周期(mounted等)，方法(methods)等。
【style】
樣式通過style標簽包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，
如要引入外部css文件
首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader,回車。
安裝完成后，就可以在style標簽下import所需的css文件。
這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用
<style>
import './assets/css/public.css'
</style>
main.js---入口文件
main.js主要是引入vue框架，根組件及路由設置，並且定義vue實例
下圖中的components:{App}就是引入的根組件App.vue
后期還可以引入插件，當然首先得安裝插件。
import Vue from 'vue' /*引入vue框架*/
import ElementUI from 'element-ui' /*引入element-ui樣式*/
import App from './App' /*引入根組件*/
import router from './router' /*引入路由設置*/
Vue.config.productionTip = false /*關閉生產模式下給出的提示*/
/*定義一個新實例*/
new Vue({
router,
render: h => h(App) // 使用render函數渲染App.vue單文件組件
}).$mount('#app') // 將該實例掛載到 #app中
index.js---路由配置
在router文件夾下，有一個index.js文件，即為路由配置文件。
import Vue from 'vue' /*引入vue框架*/
import Router from 'vue-router' /*引入路由依賴*/
import Hello from ‘@、components/Hello’ /*引入頁面組件，命名為Hello*/
Vue.use(VueRouter) /*使用路由依賴*/
/*定義路由*/
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
這里定義了路徑為'/'的路由，該路由對應的頁面是Home組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Home組件.類似的，我們可以設置多個路由，‘/index’,'/list'之類的，當然首先得引入該組件，再為該組件設置路由