1.Vue-CLI3.0創建項目
1.開發需要用到:
Babel將ES6語法轉換成ES5語法;
postcss是後處理器,less和sass是預處理器;
esLint爲代碼規範;
2.前端自動化構建工具:
Webpack、Gulp
webpack通過npm把各種工具引入進來,並且還有webpackdev-server一鍵把開發服務器啓動;
3.Vue-CLI3.0安裝流程:
首先要有npm,npm是node的包管理工具
1.地址欄輸入nodejs.org訪問node官網,下載的版本要大於8.9版本
2.cmd-->node -v 查看版本是否大於8.9
3.npm install -g @vue/cli 安裝vue-cli
4.如果安裝成功,vue --version 查看vue版本號
5.如果以前安裝過vue-cli2.0的版本,怎麼刪除呢? npm uninstall vue-cli -g
6.這時候就可以去創建項目了,不合法的創建如:vue create vueTest
合法的創建如:vue create vue-test
7.這時候會出現兩種選擇,一種是默認的,一種是我們自定義的,根據自己需要來選擇
8.安裝完後, 先進入這個項目 cd vue-test/ ,啓動 npm run serve
9.目錄說明:
package.json 當前項目的說明書,"scripts":腳本,"dependencies":運行時的依賴,"devEependencies":開發時的依賴
node_modules 放所有包的地方
public html的地方
src 寫代碼的地方,入口文件爲main.js
.browserslistrc 瀏覽器的配置文件
.eslintrc.js 代碼規範的配置項
.gitignore 當我們想把文件上傳到Git上面去,我們需要忽略一些文件夾如:node_modules不能上傳
.postcssrc.js css的後處理器的配置
babel.config.js babel的配置
如果想修改Webpack,怎麼辦?
需要在vue-test的根目錄下面創建vue.config.js
module.exports={
//修改Webpack的配置
}
10.如果我們手動去修改配置,其實挺麻煩的,這時候要用到圖形化界面 命令 vue ui
等下來寫打包