VSCode 搭建 Vue项目 lite-server

VSCode搭建Vue项目

vscode vue 格式化

1.在 vscode 的extension中搜索 “vetur”插件，并安装，安装成功后重启编辑器。

2.设置，查找 vetur.editor.defaultFormatter
Editor:Default Formatter 选择 Vetur

 

1.假设Vscode、nodejs等已经安装
打开VScode的终端，调出命令输入框。点击终端-新建终端。
node -v && npm -v

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

2.vue-cli可以帮助我们快速构建Vue项目。
npm install -g vue-cli

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

4.始创建vue项目
首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹
vue init webpack myvue

1.项目名称，如果不需要就直接回车
2.项目描述，如果不需要就直接回车
3.项目作者，默认计算机用户名
4.构建方式，两个选择（上下箭头选择，回车即为选定,vscode支持箭头选择）
建议选择 : Runtime + Compiler:recommended for most users
5.安装vue的路由插件，需要就选y
6.是否使用ESLint检测你的代码，建议选择 ‘N’
因为选择 ‘Y’ 在做调试项目时,控制台会有很多 黄色警告 提示格式不规范,但其实并不影响项目
7.是否安装单元测，建议 : N
8.是否安装E2E测试框架NightWatch（E2E，也就是End To End，“用户真实场景”）建议 : N
9.项目创建后是否要为你运行“npm install”?这里选择包管理工具(上下箭头选择，回车即为选定,vscode支持箭头选择）
// 使用npm
// 使用yarn
// 自己操作

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

5.运行项目
先cd到项目文件夹，cd myvue，然后输入以下指令
完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好

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 　　　 安装某个开发时依赖
npm update taco --sav 　　　　 yarn upgrade taco 　　　　 更新某个依赖
npm install taco --global 　　　　yarn global add taco 　　　安装某个全局依赖
npm publish/login/logout 　　　　yarn publish/login/logout    发布/登录/登录
npm run/test　　　　　　　　　  yarn run/test　　　　　　 运行某个命令

Yarn 独有的命令：
 yarn licenses ls —— 允许你检查依赖的许可信息
 yarn licenses generate —— 自动创建依赖免责声明 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的行为，在刷新的时候执行各种回调函数，比如压缩css，比如合并js等

"use strict";

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