vue-cli4安装和打包配置

vue-cli4下载

首先打开命令行窗口(window+r,输入cmd)输入vue -V ,如果有旧版本就进行卸载

	npm uninstall -g @vue/cli
	 或
	yarn global remove @vue/cli

然后进行安装

npm install -g @vue/cli
	或
yarn global add @vue/cli

安装好了后在命令行输入

vue create demo(项目的名字)

vue-cli4安装和打包配置_第1张图片
选择下面的自定义模板
vue-cli4安装和打包配置_第2张图片
按空格进行选择
vue-cli4安装和打包配置_第3张图片
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由,建议选择N,这样打包后直接丢在服务器上就可以使用了
vue-cli4安装和打包配置_第4张图片
选择css预编译
vue-cli4安装和打包配置_第5张图片
选择代码验证规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier (使用较多)
vue-cli4安装和打包配置_第6张图片
Lint on save // 保存就检测 (个人选择)
Lint and fix on commit // fix和commit时候检查
vue-cli4安装和打包配置_第7张图片
配置文件存放位置
In dedicated config files // 独立文件放置
In package.json // 放package.json里
然后回车
vue-cli4安装和打包配置_第8张图片
OK创建完成

打包配置

命令行输入cd demo(项目名)
再输入vue ui 会打开一个网页
vue-cli4安装和打包配置_第9张图片
在这里安装插件,点击添加插件(例如element-ui)然后安装第一个,依赖同上
vue-cli4安装和打包配置_第10张图片
vue-cli4安装和打包配置_第11张图片
项目配置将公共地址改为./
vue-cli4安装和打包配置_第12张图片
任务界面也可以进行运行、打包,告别了命令行黑框框!!!
各位看官觉得满意的话记得给个攒哦!

你可能感兴趣的:(vue)