Vue脚手架创建

Vue脚手架创建

Vue脚手架可以快速生成Vue项目基础的架构。

安装3.x版本的Vue脚手架：

npm install -g @vue/cli

基于3.x版本的脚手架创建Vue项目：

使用命令创建Vue项目

1. 命令：vue create my-project
2. 选择Manually select features(选择特性以创建项目)
3. 勾选特性可以用空格进行勾选。
4. 是否选用历史模式的路由：n
5. ESLint选择：ESLint + Standard config
6. 何时进行ESLint语法校验：Lint on save
7. babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
8. 是否保存为模板：n
9. 使用哪个工具安装包：npm

基于ui界面创建Vue项目

1. 命令：vue ui
2. 在自动打开的创建项目网页中配置项目信息。

分析Vue脚手架生成的项目结构

• node_modules:依赖包目录
• public：静态资源目录
• src：源码目录
  • src/assets:资源目录
  • src/components：组件目录
  • src/views:视图组件目录
  • src/App.vue:根组件
• src/main.js:入口js
• babel.config.js:babel配置文件

Vue脚手架的自定义配置（自动打开浏览器）

通过 package.json 进行配置 [不推荐使用]

"vue":{
	"devServer":{
	"port":"9990",
	"open":true
	}
}

通过单独的配置文件进行配置

创建vue.config.js，加入一下代码

module.exports = {
	devServer:{
		port:8888,
		open:true
	}
}