Vue2 vue-cli

安装与卸载vue脚手架

npm i -g @vue/cli
vue --version 查看vue脚手架版本
vue -V 查看vue脚手架版本
npm uninstall -g @vue/cli 卸载

创建项目

vue create 项目名
选择项目 （Default 为快速创建项目）
选择最后一下，回车

上下键选择 Router 空格选中 a选中所有
linter用于语法检查
babel es6语法转es5
选择完成回车下载

如果设置了路由，会出现路由模式选择

选择vue版本，回车

选择配置文件（In dedicated config files）

选择是否将当前配置保存（y）

设置当前配置名称
项目创建完成

进入项目文件夹 npm run serve 运行项目
ctrl+c终止项目

main.js


jsconfig.json

打包

方法一

vue.config.js

npm run build

项目生成

将此文件放到服务器上就能成功运行

方法二

npm run build

项目生成

vscode打开index.html
格式化文本
将所有引用改为以“./”开头的路径

项目环境变量

作用：改变服务器地址

查看当前项目环境变量

main.js

运行 npm run serve

设置开发环境的环境变量

VUE_APP_为固定开头，BASE_URL为变量名
重启项目

设置生产环境环境变量

重启项目

获取baseUrl

.env.development

重新运行，开发环境打印：

scoped

用于组件样式不互相干扰

app.js

子组件 HelloWorld.vue

样式穿透

父组件样式使用scoped
子组件如果想要使用父组件某一个dom元素的的样式,需要使用样式穿透，其子组件下的该元素都具有父组件该元素的效果

<style scoped>
	/deep/ h2{
		color:red
	}
</style>