在命令中输入以下命令创建Vue项目
1、 vue create 项目名
2、回车 让你选择创建的模式 default是默认模式
建议选择手动方式 支持更多工具的自定义 Manually select features
3、回车 接下来让你选择在项目中需要集成的工具 Tip: 按空格键选中/取消
(*) Choose Vue version
(*) Babel 作用是把项目中es6代码转成es5 用来去兼容低版本浏览器
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router 管理项目中的路由
(*) Vuex 管理项目中的共享数据状态
(*) CSS Pre-processors css处理器 sass less css处理器
(*) Linter / Formatter 对项目中的代码进行格式化的 还有格式化校验 校验代码格式规范
( ) Unit Testing
( ) E2E Testing
4、回车 接下来会问你是否使用 history 作为你的路由模式
(history模式的url比较简洁 但是兼容性不太好) 所以我们选no
5、回车 接下来会让你选择要使用那个css处理器
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
前两种都是sass 只是编译器不太一样,从使用角度这几种大同小异 可以选择 第三种 Less
6、回车 接下来让你选择你的代码校验要使用哪种校验规范
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
推荐选第三种
7、回车 接下来让你选择在什么情况下触发格式校验
(*) Lint on save 当我们去修改保存文件的时候
(*) Lint and fix on commit 当我们去执行 fix commit提交的时候
这边建议两种都选上
8、回车 接下来让你选择 Babel, ESLint 生成的配置信息放哪
In dedicated config files 生成独立的配置文件当中
In package.json 是把上面的配置信息和package.json写到一起
推荐 独立配置文件中 这样子查看和维护更加方便
9、回车 接下来问你Save this as a preset for future projects? (y/N) 是否将你刚才的一系列选择来保存一下 下次可快速创建全新的项目
如果需要 可以输入 y 然后起个名字
如果不需要 输入no
10、回车 然后根据提示来
cd 项目名
npm run serve
11、然后可以看到:
- Local: http://localhost:8080/ 这是本机访问
- Network: http://192.168.1.6:8080/ 这是局域网可以访问