Vue-CLI构建vue项目
Vue CLI
是一个基于Vue.js
进行快速开发的完整系统;Vite
构建的项目很多都没有, 需要自己按需安装。
安装
全局安装
: 在任意目录执行下面这个命令都可以安装成功!
npm install -g @vue/cli
检查是否安装成功
vue --version
安装成功之后, 就可以通过cli
来创建项目
创建项目
直接用
cmd
命令创建项目
创建一个新项目
vue create '项目文件夹名称'
, 下面的例子, 项目文件夹名称为work-admin
- 执行创建命令
vue create work-admin
- 选择合适配置
*** Babel
转码器, 一般需要的TypeScript
js的超集, 没用到就不需要Progressive Web App (PWA) Support
渐进式的web程序, 这里暂时不需要*** Router
路由, 一般需要Vuex
状态管理CSS Pre-processors
css的预处理器,比如less等, 不知道暂时不用***Linter / Formatter
代码风格的格式化,一般选中Unit Testing
代码的单元测试, 先不用管E2E Testing
代码的E2E
测试,先不用管
上面选择之后, 回车, 就是选择Vue的版本号
- 选择Vue版本
- 选择历史模式还是hash模式, 我们这里选择历史模式
- 选择语法检测和代码格式化插件的配置,这里选择常规的或者默认的配置就可以了
ESLint with error prevention only
默认配置ESLint + Airbnb config
国外一家公司的配置ESLint + Airbnb config
标准的配置ESLint + Prettier
常规的配置
- 选择语法和格式化检测的时间
Lint on save
代码保存的时候, 就去检测,一般选中这个
Lint and fix commit
提交的时候去检测。
- 选择这些插件配置的一个保存方式
In dedicated config files
各自保存各的, 自己保存自己的文件夹,分开设置,选择这个分开配置In package.json
统一保存在这个文件里面
- 是否保存下来这个配置, 以后供别的项目使用
至此, 安装完成, 上面那一步稍微有点慢, 程序会自动去安装依赖等, 出现下面页面表示安装成功
启动项目
切换到项目目录,执行下面命令
npm run serve
注意:
vite创建的项目启动命令是 npm run dev
项目目录介绍
node_modules/
存放项目依赖的文件夹public/
存放index.html
和图标
src/
项目的源代码, 根路径src/assets/
存放图片,css文件,js文件src/components/
存放一些公共的
组件src/router/
存放路由文件目录src/views/
页面组件routersrc/router/index.js
路由脚本文件src/main.js
整个项目的入口文件src/App.vue
根组件
babel.config.js
babel关于转码器的一些配置package.json
整个项目依赖的一些版本信息,注意它是一些大概得版本, 不是具体的版本package-lock.json
记录node_modules/
模块下的具体来源和版本号以及其他信息vue.config.js
vue的一些配置