一硝训、vue-cli 3.0（vue腳手架3.0）
1锨匆、Vue-cli 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)
2、使用vue-cli腳手架創(chuàng)建項目
- （1）全局安裝腳手架
npm install -g @vue/cli
- 輸入：vue -V姜性，檢查是否安裝成功
-
（2）創(chuàng)建Vue項目的兩種方式
- （2.1）使用命令創(chuàng)建項目
vue create hello-world（項目名稱）
-
（2.2）使用圖形界面創(chuàng)建項目
- 開啟圖形界面：vue ui
- （2.3）啟動項目
npm run serve（serve根據(jù)自己在package.json中的命名瞪慧，一般默認serve）
image
3、項目目錄基本結(jié)構(gòu)
- （1）package.json：主要用來定義項目中需要依賴的包
- （2）babel.config.js：編譯es6用的,把es6轉(zhuǎn)變成js5
- （3）gitignore： git忽略的文件或文件夾
- （4）src：源代碼存放的地方
- （5）public：放置公共的文件
4部念、其他設(shè)置
- （1）在圖形界面中啟動項目和打包項目
-
（2）運行打包后的文件需要啟動一個服務(wù)弃酌，不然直接打開會報錯
- npm i http-server -g
- 在打包后的目錄(本項目是dist), 打開命令提示符
- 輸入http-server -o
- （3）在圖形界面中安裝項目需要的依賴
-
（4）查看webpack在項目中的配置（webpack默認被隱藏）
- （4.1）在控制臺查看：vue inspect
- （4.2）把配置輸出到out.js文件查看：vue inspect>out.js
-
（5）可以對項目中的webpack新增配置
- 新增配置文件：vue.config.js
- 要跟package.json在同一目錄下，與配置webpack.config.js同理
二儡炼、快速原型開發(fā)（用vue腳手架打開組件）
1矢腻、vue serve
- （1）在開發(fā)環(huán)境模式下零配置，為 .js 或 .vue 文件啟動一個服務(wù)器
- （2）文檔地址：https://cli.vuejs.org/zh/guide/prototyping.html
2射赛、安裝工具
npm install -g @vue/cli-service-global
3、使用
- （1）制作小組件App.vue
<template>
<h1>Hello!</h1>
</template>
- （2）然后在這個 App.vue 文件所在的目錄下運行
vue serve App.vue
4奶是、啟動項目的多種方式
- vue serve 使用了和 vue create 創(chuàng)建的項目相同的默認設(shè)置(webpack楣责、Babel、PostCSS 和 ESLint)聂沙。它會在當前目錄自動推導(dǎo)入口文件——入口可以是 main.js秆麸、index.js、App.vue 或 app.vue 中的一個及汉。你也可以顯式地指定入口文件沮趣，這個入口可以是一個 .js 或一個 .vue 文件。如果沒有指定入口坷随，則會使用 src/App.vue
- （1）npm run serve（完整的項目）
- （2）vue serve src/main.js
- （3）vue serve App.vue
