必备-10.vue/cli
vue-cli是什么
-
vue/cli(Command Line Interface):vue的命令行接口,我们称之为脚手架,其作用是帮助我们快速生成一个可以放到服务器上的项目 -
使用网址:https://cli.vuejs.org/zh/guide/installation.html
vue-cli创建一个项目
第一步:安装@vue-cli
- 使用vue必须有nodejs
- 安装nodejs:(https://nodejs.org/en/) 验证
node -v(version) 使用npm(安装vue npm install vue) - 安装vue-cli:
npm install -g @vue/cli 验证 vue -V 使用vue
第二步:创建项目文件
-
1、创建一个文件夹(文件名不能包含大写字母),进入文件夹路径下的cmd窗口 -
2、使用命令创建vue项目:vue create 项目名 -
3、选择版本信息:有vue2.0/vue3.0/自定义,三个选项,在项目真实开发中一般会用自定义,选择我们需要的插件
- Babel :兼容es6
- TypeScript : javascript的超集
 -
4、选完之后要再次进行确认选择:
 - node-sass是自动编译实时的,dart-sass需要保存后才会生效
-
5、选择vue版本,目前选择vue 2.x
-
6、选择哪个配置文件来配置babel等:
In dedicated config files :在专用配置文件中In package.json :在package中 -
7、是否保存你的自定义选项,以便下次创建时直接使用:
-
8、等待文件创建完成:
项目创建失败怎么办
第三步:启动项目
- cd my-project
- npm run serve
- 开发环境启动项目:
npm run serve - 生产环境启动项目:
npm run build
第四步:访问项目
- local:本地访问的路径
- **network:**网络访问的路径
第五步:vscode使用Vue
- 安装Vetur插件->重启vscode->格式化
xxx.vue 代码:shift+alt+f
一个项目基本结构

各配置文件代码解析
package.json
- 默认的生成的package.json:不仅可以编译 es6语法,也可以编译vue语法

babel.config.js

public和src

重写webpack配置
-
@vue/cli 为了美化项目,把写好的webpack配置项都放在 node_modules中了
- 想要修改其配置项,就需要自己在package.json同级目录下创建 vue.config.js 文件,在文件中修改它的一些配置【vue脚手架设置好的规则】
-
配置地址:https://cli.vuejs.org/zh/config/#vue-config-js -
module.exports = {
publicPath: './',
lintOnSave: process.env.NODE_ENV !== 'production',
productionSourceMap: false,
};
vue 使用 less
- 第一步:安装less加载器:
npm i less@3 less-loader@7 --save-dev
- **注意:**使用低版本,否则报错,脚手架不兼容高版本
vue项目的兼容性
- 检查版本兼容网址:https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist
- 注意:vue的核心是基于Object.defineProerty 实现数据劫持的,所以及不论怎么处理,IE8及以下都不兼容
- 方案一:调整 package.json 中的 browserslist 配置项中
- css3的样式会基于这个列表自动设置不同的前缀
- es6等代码也会基于这个列表,自己进行语法编译
- 方案二:基于@babel/polyfill 进行处理
|