文章目录
Vue脚手架创建
Vue脚手架可以快速生成Vue项目基础的架构。
安装3.x版本的Vue脚手架:
npm install -g @vue/cli
基于3.x版本的脚手架创建Vue项目:
使用命令创建Vue项目
- 命令:vue create my-project
- 选择Manually select features(选择特性以创建项目)
- 勾选特性可以用空格进行勾选。
- 是否选用历史模式的路由:n
- ESLint选择:ESLint + Standard config
- 何时进行ESLint语法校验:Lint on save
- babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
- 是否保存为模板:n
- 使用哪个工具安装包:npm
基于ui界面创建Vue项目
- 命令:vue ui
- 在自动打开的创建项目网页中配置项目信息。
分析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
}
}