Vue 項目開發
環境搭建
python：c語言編寫，解釋執行python語言的
node：c++語言編寫，解釋執行JavaScript語言的
npm類似於pip，是為node環境安裝額外功能的
1 官網下載並安裝node，附帶npm
https://nodejs.org/zh-cn/
2 換源：將npm換為cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3 安裝vue腳手架
cnpm install -g @vue/cli
注：如果第二三步異常，基本都是由網絡導致的，可以重新執行第二三步，如果一直有問題，可以清理緩存后重復
npm cache clean --force
項目的創建
vue create 項目名
要提前進入目標目錄(項目應該創建在哪個目錄下)
選擇自定義方式創建項目，選取Router, Vuex插件
啟動/停止項目
cnpm run serve / ctrl+c
要提前進入項目根目錄
打包項目
cnpm run build
要在項目根目錄下進行打包操作
項目移植
cnpm install # 將公司代碼在自己電腦上跑起來 1 拷貝出環境 node_modules 意外的文件與文件夾到目標文件夾 2 終端進入目標文件夾所在位置 3 執行：npm install 重新構建依賴（npm可以用cnpm替換)
使用 PyCharm 配置並啟動 Vue 項目
用 PyCharm 打開 Vue 項目
添加配置 npm 啟動
項目目錄結構解析
├── v-proj | ├── node_modules // 當前項目所有依賴，一般不可以移植給其他電腦環境 | ├── public | | ├── favicon.ico // 標簽圖標 | | └── index.html // 當前項目唯一的頁面 | ├── src | | ├── assets // 靜態資源img、css、js | | ├── components // 小組件 | | ├── views // 頁面組件 | | ├── App.vue // 根組件 | | ├── main.js // 全局腳本文件（項目的入口） | | ├── router | | | └── index.js// 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系） | | └── store | | | └── index.js// 倉庫腳本文件（vuex插件的配置文件，數據倉庫） | ├── README.md └ └── package.json等配置文件
配置文件
<!-- vue.config.js 沒有可以自己創建--> module.exports={ devServer: { port: 8888 } } // 修改端口,選做
Vue 組件( .vue 文件 )
pycharm 安裝 vue.js 插件，就可以高亮顯示 vue 文件了
- 一個 .vue 文件就是一個文件
- 組件都是由三部分組成： html 結構，js 邏輯，css 樣式
- html 結構都是在 template 標簽中，頁面結構有且只有一個根標簽（template 一級結構下）
- js 邏輯都是在script標簽中，必須設置導出，export default {...}
- css樣式都是在style標簽中，必須設置scoped屬性，是樣式組件化
<template> <div class="first-cp"> <h1>模板區域</h1> </div> </template> <script> // .vue文件類似於模塊，可以直接相互導入，所以在組件內部要設置導出 // 邏輯代碼區域 // 該語法和 script 綁定出現 export default { } </script> <style scoped> /* scoped可以使樣式組件化，只在自己內部起作用，scoped 與 style 綁定出現 */ /* 樣式區域 */ </style>
# 入口文件 main.js （項目入口）
- main.js 是項目的入口文件
- new Vue() 就是創建跟組件，用 render 讀取一個 .vue 文件，$mount 渲染替換 index.html中的占位
- 項目所依賴的環境，比如： Vue 環境，路由環境，倉庫環境，第三方環境，自定義環境都是在 main.js 中完成
<!--main.js--> import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')改寫
import Vue from 'vue' // 加載vue環境 import App from './App.vue' // 加載根組件 import router from './router' // 加載路由環境 import store from './store' // 加載數據倉庫環境 Vue.config.productionTip = false; // tip小提示 import FirstCP from './views/FirstCP' new Vue({ el: '#app', router: router, store: store, render: function (readVueFn) { return readVueFn(FirstCP); // 讀取FirstCP.vue替換index.html中的占位 } });
根組件 app.vue
app.vue 是我們的根組件,所有的頁面都是app.vue下面切換的，可以理解為所有組件都是app.vue的子組件
可以把頭部底部每個頁面都出現的文件都放在app.vue里面,以及在里面寫公用的css代碼
<!-- 1）App.vue是項目的根組件，是唯一由main.js加載渲染的組件，就是替換index.html頁面中的<div id="app"></div>的占位標簽 2）實際開發中App.vue文件中，只需要書寫下方五行代碼即可（可以額外增加其他代碼） 3）router-view是一個占位標簽，由router插件控制，可以在router的配置文件中進行配置 4）router-view就是根據router在index.js中配置的路由關系被 指定路徑 匹配 指定頁面組件 渲染 router-view或被不同的頁面組件替換，就形成了頁面跳轉 --> <template> <div id="app"> <!-- 前台路由占位標簽--> <router-view/> </div> </template> <style> body { margin: 0; } </style>
index.html 文件入口
index.html 如其他 html 一樣，但一般只定義一個空的根節點
在main.js里面定義的實例將掛載在根節點下，內容都通過vue組件來填充
<!DOCTYPE html> <html lang="en"> <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>
router 路由
路由配置*
1 當用戶在瀏覽器中訪問的路由是 / ，router插件就會加載 Home.vue文件，同理 /about 就是 About.vue文件
2 將加載的 Home.vue文件 或者 About.vue文件，去替換App.vue文件中的 <router-view> 占位符
3 用redirect配置來實現路由的重定向
import Vue from 'vue' import VueRouter from 'vue-router' // import Home from '../views/Home.vue' // import 別名 from ‘文件’ import Home from '../views/Home' import About from '../views/About' import First from '../views/FirstCP' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About }, { path: '/first', name: 'First', component: First } ];
components 子組件
Nav.vue
<template> <div class="nav"> <img src="" alt=""> <ul> <li> <!-- router控制的路由，不是用a標簽完成跳轉 --> <!-- a標簽會刷新頁面，錯誤的--> <!-- router-link標簽也能完成跳轉，且不會刷新頁面，就是router提供的a標簽(最終會被解析為a標簽，還是用a來控制樣式)--> <!-- router-link標簽的to屬性控制跳轉路徑，由兩種方式 to="路勁字符串" :to="{name: '路由名'}" 反向解析 --> <a href="/">主頁</a> </li> <li> <router-link to="/about">關於頁</router-link> </li> <li> <!-- to="字符串"，v-bind:to="變量"，可以簡寫為 :to="變量" --> <router-link :to="{name: 'First'}">第一頁</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav" } </script> <style scoped> .nav { width: 100%; height: 80px; background: rgba(0, 0, 0, 0.3); } img { width: 200px; height: 80px; background: tan; float: left; } ul { float: left; list-style: none; margin: 0; padding: 0; height: 80px; background: pink; } ul li { float: left; height: 80px; padding: 30px 20px 0; } a { color: black; } </style>
FirstCP.vue
<template> <div class="first-cp"> <!--渲染--> <Nav/> </div> </template> <script> // 1 導入子組件，2 注冊子組件，3使用子組件 // 父組件加載子組件：父組件通常是頁面組件，是被一個個小組件這些子組件組裝成的頁面 // 1）導入語法要在 export default{} 之上完成 // 2）@符合標識 項目src文件夾 絕對路徑 // 3）要在export default{} 的括號中用 components 注冊 // 4）在該組件的模板中就可以渲染子組件了(html代碼中是區別大小寫的) import Nav from '@/components/Nav' export default { components: { Nav, } } </script> <style scoped> .home { width: 100vw; height: 100vh; background-color: orange; } </style>
項目初始化
1 根組件：App.vue
<template> <div id="app"> <router-view /> </div> </template>2 路由配置：router / index.js
const routes = [ { path: '/', name: 'Home', component: Home } ];3 組件：views 和 components 文件夾
- 刪除 Home.vue 以外的所有組件
- 初始化 Home.vue
<template> <div class="home"> </div> </template>4 分類管理資源：assets 文件夾
建立 img, css, js子文件夾，刪除原來的資源
5 如果要修改頁面標簽圖標
替換 public 文件夾下的 favicon.ico 圖片文件