如何使用1.Vue-CLI3.0創建項目以及2.打包這個項目

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

 

等下來寫打包

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章