Vue cli構建專案
一、建立專案
vue create hello-world
你會被提示選取一個 preset。你可以選預設的包含了基本的 Babel + ESLint 設定的 preset，也可以選“手動選擇特性”來選取需要的特性。
這個預設的設定非常適合快速建立一個新專案的原型，而手動設定則提供了更多的選項，它們是面向生產的專案更加需要的。
如果你決定手動選擇特性，在操作提示的最後你可以選擇將已選項儲存為一個將來可複用的 preset。
二、啟動專案
專案建立之後，會在當前目錄下多出一個專案資料夾。從它的package.json中可以看到只有 vue.js 的核心依賴
然後啟動專案試試，在專案根目錄執行終端，在命令列輸入
npm run serve # OR yarn serve
在一個 Vue CLI 專案中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。 這是你使用預設 preset 的專案的 package.json：
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
在瀏覽器中開啟連結http://localhost:8080/，就能看到專案的啟動頁
pycharm中運快捷啟動專案：
三、配置檔案
專案預設使用的埠是 8080，如果想使用別的埠，可以在專案的根目錄建立一個vue.config.js
// vue.config.js
module.exports = {
outputDir: 'dist', // 打包的目錄
lintOnSave: true, // 在儲存時校驗格式
productionSourceMap: false, // 生產環境是否生成 SourceMap
devServer: {
open: true, // 啟動服務後是否開啟瀏覽器
overlay: { // 錯誤資訊展示到頁面
warnings: true,
errors: true
},
host: '0.0.0.0',
port: 8082, // 服務埠
https: false,
hotOnly: false,
// proxy: { // 設定代理
// '/api': {
// target: host,
// changeOrigin: true,
// pathRewrite: {
// '/api': '/',
// }
// },
// },
},
}
四、目錄結構
1、node_modules——[依賴包]
node_modules裡面是專案依賴包，其中包括很多基礎依賴，自己也可以根據需要安裝其他依賴。安裝方法為開啟cmd，進入專案目錄，輸入npm install [依賴包名稱],回車。
在兩種情況下我們會自己去安裝依賴：
<1> 專案執行缺少該依賴包：例如專案載入外部css會用到的css-loader，路由跳轉vue-loader等（安裝方法示例：npm install css-loader）
<2> 安裝外掛：如vux（基於WEUI的移動端元件庫），vue-swiper（輪播外掛）
注：有時會安裝指定依賴版本，需在依賴包名稱後加上版本號資訊，如安裝11.1.4版本的vue-loader，輸入npm install[email protected]
2、index.html——[主頁]
index.html如其他html一樣，但一般只定義一個空的根節點，在main.js裡面定義的例項將掛載在根節點下，內容都通過vue元件來填充。這是整個應用的 html 基礎模板，也是打包編譯後的專案入口。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3、src——[專案核心檔案]
專案核心檔案前面已經進行了簡單的說明，接下來重點講解main.js，App.vue,及router的index.js
4、main.js——[入口檔案]
main.js主要是引入vue框架，根元件及路由設定，並且定義vue例項，後期還可以引入外掛，當然首先得安裝外掛。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
main.js 只是引入了 App.vue 元件，並掛載到上面提到的 #app 節點下。這裡的createApp方法是 Vue 3 新增的全域性 API，用來建立一個 Vue 應用，並掛載到某個 DOM 節點。
5、App.vue——[根元件]
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
【template】 其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如下圖，父節點為#app的div，其沒有兄弟節點） 是子路由檢視，後面的路由頁面都顯示在此處 打一個比喻吧,類似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示 【script】 vue通常用es6來寫，用export default匯出，其下面可以包含資料data，生命週期(mounted等)，方法(methods)等，具體語法請看vue.js文件，在後面我也會通過例子來說明。 【style】 樣式通過style標籤包裹，預設是影響全域性的，如需定義作用域只在該元件下起作用，需在標籤上加scoped，
6、router——路由
router資料夾下，有一個index.js，即為路由配置檔案
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
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 = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
這裡定義了路徑為'/‘的路由，該路由對應的頁面是Home元件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Home元件
類似的，我們可以設定多個路由，‘/index’,'/list’之類的，當然首先得引入該元件，再為該元件設定路由。