VSCode搭建Vue項目

vscode vue 格式化

1.在 vscode 的extension中搜索 “vetur”插件，并安裝，安裝成功后重啟編輯器。

2.設(shè)置，查找 vetur.editor.defaultFormatter
Editor:Default Formatter 選擇 Vetur

1.假設(shè)Vscode、nodejs等已經(jīng)安裝
打開VScode的終端，調(diào)出命令輸入框。點擊終端-新建終端。
node -v && npm -v

查看npm安裝的插件
npm ls -g cnpm
npm ls -g --depth 1

2.vue-cli可以幫助我們快速構(gòu)建Vue項目。
npm install -g vue-cli

3.安裝webpack，它是打包js的工具
npm install -g webpack

4.始創(chuàng)建vue項目
首先創(chuàng)建一個文件夾用來存放你的項目，用vscode打開對應(yīng)的文件夾，并在終端cd到對應(yīng)的文件夾
vue init webpack myvue

1.項目名稱，如果不需要就直接回車
2.項目描述，如果不需要就直接回車
3.項目作者，默認計算機用戶名
4.構(gòu)建方式，兩個選擇（上下箭頭選擇，回車即為選定,vscode支持箭頭選擇）
建議選擇 : Runtime + Compiler:recommended for most users
5.安裝vue的路由插件，需要就選y
6.是否使用ESLint檢測你的代碼，建議選擇 ‘N’
因為選擇 ‘Y’ 在做調(diào)試項目時,控制臺會有很多 黃色警告 提示格式不規(guī)范,但其實并不影響項目
7.是否安裝單元測，建議 : N
8.是否安裝E2E測試框架NightWatch（E2E，也就是End To End，“用戶真實場景”）建議 : N
9.項目創(chuàng)建后是否要為你運行“npm install”?這里選擇包管理工具(上下箭頭選擇，回車即為選定,vscode支持箭頭選擇）
// 使用npm
// 使用yarn
// 自己操作

完成之后的vscode左邊可以看到如下目錄，其中main.js就是入口。

5.運行項目
先cd到項目文件夾，cd myvue，然后輸入以下指令
完成之后，項目文件夾中會出現(xiàn)一個dist文件夾，里面就是打包之后的內(nèi)容，直接部署就好

npm 部署方式
npm run dev
npm run build

yarn 部署方式
yarn run dev
yarn build

npm與yarn比較：
npm init 　　　　 　　 　　　 yarn init 　　　　　　 　　　初始化項目
npm install/link 　　 　　　　　yarn install/link 　　　　　　默認安裝依賴
npm install taco --save 　　　　yarn add taco 　　　　　　 安裝某個依賴，并默認保存到package
npm uninstall taco --save 　　   yarn remove taco 　　　　  移除某個依賴
npm install taco --save-dev 　　 yarn add taco --dev 　　　 安裝某個開發(fā)時依賴
npm update taco --sav 　　　　 yarn upgrade taco 　　　　 更新某個依賴
npm install taco --global 　　　　yarn global add taco 　　　安裝某個全局依賴
npm publish/login/logout 　　　　yarn publish/login/logout    發(fā)布/登錄/登錄
npm run/test　　　　　　　　　  yarn run/test　　　　　　 運行某個命令

Yarn 獨有的命令：
 yarn licenses ls —— 允許你檢查依賴的許可信息
 yarn licenses generate —— 自動創(chuàng)建依賴免責(zé)聲明 license
 yarn why taco —— 檢查為什么會安裝 taco，詳細列出依賴它的其他包
 yarn why vuepress —— 檢查為什么會安裝 vuepress，詳細列出依賴它的其他包

lite-server 安裝

npm init
npm install --save-dev lite-server

修改package.json文件，加入如下語句：

"scripts": {
"dev": "lite-server",
"start": "lite-server"
},

默認端口是3000，如果想使用其他端口需要修改配置：

新建bs-config.json文件，
{
"port":8084,
"browser" : ["chrome"]
}

高級玩法
刪除json配置文件，新建bs-config.js文件，
在這里你可以自定義lite-server的行為，在刷新的時候執(zhí)行各種回調(diào)函數(shù)，比如壓縮css，比如合并js等

"use strict";

module.exports = {
injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
watchOptions: { ignored: 'node_modules' },
server: {
baseDir: './',
middleware: []
},
"port":8084,
"browser" : ["chrome"]
}