vue項目初始化

初始化

安裝腳手架

npm install @vue/cli -g

建立項目

vue create my-project

勾選

• babel:將ES6轉成ES5
• router:路由
• vuex:狀態管理
• css pre-processors:css預處理器
• ESLint:ES6檢測代碼規範（不推薦）

選擇

• 不使用history模式
• 使用sass with node-sass

vscode插件推薦

• vetur
• vue 2 snippets
• vue vscode snippets

chrome插件調試插件

• vue-devtools

目錄結構

• package.json：項目的包管理文件，使用npm或者yarn命令局部安裝的第三方模塊

結尾是--save，這個模塊就被記錄在dependencies中
結尾是--save--dev，就被記錄在DevDependencies中

• public:存放項目的模板文件，裏面的index.html是整個項目的單頁面
• src:項目的源代碼目錄，在這個文件裏寫代碼

main.js:入庫文件
router.js:路由配置文件
store.js:vuex狀態管理配置文件
app.vue:根組件
views:路由組件
compontents:在路由組件引入的其餘組件
assets:在vue文件中使用相對路徑引入的志願文件

啓動項目

• 查看package.json中的scripts
  dev:vue-cli-service serve
npm run dev