【Vue】高级系列（二）配置Vue脚手架-npm方法-vscode配置-vue.config.js-项目打包与发布-ESlint使用

最新推荐文章于 2023-07-28 18:25:28 发布

YK菌

最新推荐文章于 2023-07-28 18:25:28 发布

阅读量2.6k

点赞数 3

分类专栏：前端框架Vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44972008/article/details/113444060

版权

本文介绍了如何使用Vue CLI创建项目，解析了不同版本的Vue的区别，详细阐述了vue.config.js的配置，展示了如何编写和打包Vue应用，包括自动更新功能。同时，文章深入探讨了ESLint的使用，包括其规则和配置文件，指导开发者实现代码规范检查。

摘要由CSDN通过智能技术生成

建议使用cli 3.x 版本创建新项目 https://blog.csdn.net/weixin_44972008/article/details/1141875

1. vue-cli

vue-cli是Vue官方提供的脚手架工具
中文网址：https://cli.vuejs.org/zh/
GitHub地址：https://github.com/vuejs/vue-cli
这里用的版本是这个：https://github.com/vuejs/vue-cli/tree/v2

2. 创建Vue项目

项目代码：https://github.com/yk2012/vue_demo/tree/main/demo1_HelloVue

npm install -g vue-cli

在这里插入图片描述

vue init webpack vue_demo

在这里插入图片描述
选择第三个后会有提示，选第一个会自动完成

cd vue_demo

npm intall

npm run dev

在这里插入图片描述

访问网址结果
在这里插入图片描述

3. 模板项目结构

在这里插入图片描述
默认不是自动打开浏览器，可以设置成自动打开

源码目录，主要在这里面写代码

主页
在这里插入图片描述
在src下组件文件夹里创建vue文件

在vscode里输入vue然后按Tab键，自动生成一个vue模板
在这里插入图片描述

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

关于不同版本的Vue

vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内