使用vue-cli初始化一個專案結構
- 安裝：
npm i -g vue-cli
- 腳手架生成專案結構：
vue init webpack 專案名稱
/asset 專案中的靜態資源
index.css 專案的全域性樣式
/components 專案中的元件
/router 專案中的路由檔案
index.js 所有的路由元件
APP.vue 專案的根元件，只有一個路由出口
main.js 整個專案的入口，也是webpack打包的入口
複製程式碼
開啟一個新功能
- 在
components目錄中建立元件
- 在
router/index.js中配置路由
使用element-ui元件庫
- 安裝：
npm i element-ui -S
- 在main.js中匯入：
- js檔案：
import ElementUI from 'element-ui'
- 樣式：
import 'element-ui/lib/theme-chalk/index.css'
- UI外掛：
Vue.use(Element-UI)
在元件中使用預編譯css
- 安裝:
npm i -D less less-loader
抽離單檔案元件的內容
- 說明：如果將所有的template、script、style都放在.vue檔案中，那麼，這個檔案會變得非常臃腫。可以將不同的內容，抽離到單獨的檔案中
<!--將模板抽離到當前目錄下的：template.html檔案中-->
<tempalte src="./template.html"></template>
<!--將js抽離到當前目錄下的：sccript.js檔案中-->
<script srcc="./script.js"></sccript>
<!--將style抽離到當前目錄下的：style.css檔案中-->
<style src="./style.less" lang="less"></style>
複製程式碼