1、需要先安裝nodejs 和vue-cli
這里使用的vue-cli是4.3.1
vue -V
@vue/cli 4.3.1
2嗓化、使用vue-cli創(chuàng)建一個工程
在命令行中輸入初始化項目的命令悍手，做了一些選擇:
vue create my_project
babel是一般都需要的筛璧，eslint(語法檢查和樣式檢查)還是有用的
然后就是一頓的install，ok了之后
進入目錄之后，跑下面的命令鸵荠，再訪問http://localhost:8080/
cd my_project
npm run serve
如果想自己手動選擇一些配置項高氮，就選擇"Manually select features":
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
> Manually select features
選擇了這些
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
后面的這樣選擇的
css預處理器——選擇的是dart-sass
lint——用的Prettier，選擇的是在保存的時候就lint顷牌，早點發(fā)現(xiàn)問題好一點
Babel, ESLint的配置文件——選擇的是各自有各自的配置文件剪芍，不用都放到package.json里面
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
然后就是一頓安裝。窟蓝。罪裹。。运挫。状共。，命令行下面執(zhí)行谁帕，訪問https://localhost:20000/
cd my_project
npm run serve
3峡继、vue工程文件的基本說明
public: html模板index.html還有favicon.ico
src: 是源代碼目錄
????assets——靜態(tài)資源比如字體，圖片等 匈挖，
????components——全局公用組件碾牌，
????router——路由，
????store——全局 store管理儡循，
????views——所有頁面舶吗，
????main.js—— 入口文件 加載組件 初始化等，
????app.vue——入口頁面择膝，
node_modules: 那些需要的package誓琼，
.browserslistrc:一個單獨的文件，指定了目的目標瀏覽器的范圍
.eslintrc.js:eslint 配置項
babel.config.js:babel的配置文件
package.json:這個項目模塊的描述文件
4调榄、配置文件的修改和增加
4.1踊赠、增加環(huán)境的配置文件
一般分為dev、int每庆、production環(huán)境筐带，各個環(huán)境有各自的一些環(huán)境變量之類的，
下面這個是.env.dev的缤灵，不同環(huán)境的api或者env名字不一樣
ENV = 'dev'
VUE_APP_BASE_API = '/devapi'
VUE_CLI_BABEL_TRANSPILE_MODULES = true
port = 6000
在代碼里面就可以這樣使用判斷當前是什么環(huán)境
if (process.env.NODE_ENV !== 'dev') {
window.console.log =function(){};
}
4.2 修改package.json
增加dev名伦籍，還有各個環(huán)境的build命令，現(xiàn)在跑dev環(huán)境的命令就是npm run dev了
"scripts": {
"dev": "vue-cli-service serve --mode dev",
"build:prod": "vue-cli-service build --mode production",
"build:int": "vue-cli-service build --mode int",
"build:dev": "vue-cli-service build --mode dev",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
4.3 增加vue.config.js
默認是沒有vue.config.js腮出，在package.json同級增加一個vue.config.js文件帖鸦。
配置參考這里https://cli.vuejs.org/zh/config/
5、添加需要的基本的庫了
element-ui胚嘲，axios作儿，moment等等需要的庫
npm install --save xxx
