VUE專案開發流程

安裝npm

安裝webpack\vue-cli(2.9.6版本--版本不同可能會導致以下一些目錄結構以及錯誤解決辦法不符合實際情況)

初始化建立專案，專案名稱、專案描述、擁有者等等資訊，

d:\code\self>vue init webpack common-component ? project name common-component # 專案名稱 ? project description a vue.js project # 專案描述 ? author *** # 專案擁有者 ? vue build standalone ? install vue-router? yes # 路由配置 ? use eslint to lint your code? yes # 啟用eslint檢測 ? pick an eslint preset standard ? set up unit tests no # 單元測試 ? setup e2e tests with nightwatch? no # e2e測試 ? should we run `npm install` for you after the project has been created? (recommended) npm # 是否在專案建立以後執行npm install命令，有三個選項，我選擇的第乙個，所以會自動執行npm install命令，需要等待一段時間，時間較長；想自己執行的可以選擇第三個

vue-cli · generated "common-component".

├ build   進行webpack的一些配置
├ build.js
├ check-versions.js
├ utils.js
├ vue-loader.conf.js
├ webpack.base.conf.js
├ webpack.dev.conf.js
├ webpack.prod.conf.js
├ config 比較重要的是index.js，主配置檔案，參閱開發期間的api**和後端框架整合
├ dev.env.js
├ index.js
├ prod.env.js
├ node_modules 執行了`npm install`命令之後的資料夾
├ src 大部分**都寫在這裡
├ assets: 放置一些，如logo等
├ components: 元件檔案目錄
├ main.js: 專案的核心檔案。
├ static 不想使用webpack進行處理的靜態資源，將被直接複製到生成webpack建立資產的同乙個目錄中
├ index.html 應用程式的模板index.html。 在開發和構建期間，webpack將生成的url自動注入到此模板中以呈現最終的html。
├ package.json 所有構建依賴項和構建命令的npm軟體包元檔案
└─│

在頁面中開發時常常需要引用子元件，比如引入helloworld.vue元件

import hello from '../../components/pages/helloworld'

路徑多層巢狀，很容易出現問題，如果使用絕對路徑又會路徑過長，可以在webpack.config.js檔案中建立絕對路徑

resolve: 
},

使用：

import hello from '@components/pages/helloworld'

VUE專案開發流程

vue專案開發流程附加模板

vue開發流程

深圳Web培訓 Vue專案開發流程

VUE專案開發流程

vue專案開發流程附加模板

vue開發流程

深圳Web培訓 Vue專案開發流程

相關推薦