VSCode搭建Vue项目

VSCode搭建Vue项目

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,详细列出依赖它的其他包

 

VSCode搭建Vue项目

上一篇:What is a host only cookie?


下一篇:Yii框架添加扩展