一、找到希望创建项目的文件夹,进入终端
二、执行 vue create 文件夹名称
运行结果如下:
1、选择Manually select features ==> 手动选择特征(自己选择设置)前两个Default是默认推荐设置,其他的则是之前已经创建过的设置
注意:这里选择需要用空格选择,回车是所有想要的配置选择好后确认所有
- Babel :是将ES6的代码在浏览器中自动转换成ES5的代码
必选
- TypeScript :JS拓展的一些用法
- Progressive Web App (PWA) Support:渐进Web应用程序(PWA)支持
一般不选
- Router:路由
必选
- Vuex:Vue开发的状态管理模式
必选
- CSS Pre-processors:CSS 预处理器,让CSS变成一门编程语言,可以使用变量,函数,算法等
必选
- Linter / Formatter:
默认选中
- Unit Testing:单元测试
- E2E Testing:单元测试
2、进入Vue版本号的选择,一般选择3.x即可,老项目需要选择2.x
3、Use class-style ***ponent syntax?:使用css风格的组件语法?==> 输入y确认
4、Use Babel alongside TypeScript :是否使用Babel处理TS? ==> 选择y确认
5、Use history mode for router?:路由使用history模式?==> 选择y确认
6、Pick a CSS pre-processor :选择一个CSS的预处理器 ==> 选择第一个Sass/SCSS
7、选择第三个ESlint + Standard config:通用规范
- ESLint with error prevention only :只配置使用 ESLint 官网的推荐规则
- ESLint + Airbnb config :Airbnb规范
- ESLint + Standard config :通用规范
- ESLint + Prettier :Prettier规范
8、选择lint on save (养成代码的良好习惯)
- Lint on save:代码不符合 lint 规则时,会提示 warning;语法错误,会直接在页面上显示 error
- Lint and fix on ***mit:代码除语法错误不会提示 warning
9、建议选择In dedicated config files
- In dedicated config files:单独创建两个文件夹
- In package.json :放在package.json文件内
10、Save this as a preset for future projects? :是否保存这些设置;保存命名后就会和开始文件一样在开头生成一个demo文件设置可选择
11、Save preset as:保存这些设置的名字(最好和vue create 文件名的名字一致)
12、恭喜你,创建成功!关闭该页面
13、进入Vue create 文件名 的文件夹内打开终端输入 npm run serve
- local:该地址就是自己本地可以直接访问的地址,直接进入浏览器输入该地址即可
- ***work:服务器地址,别人也可以访问
三、打开vscode将刚创建好的文件夹加入工作区
注意:!!!这里由于刚创建好的文件夹不一定在根目录,所以容易会将该文件夹的外层文件夹加入工作区,会导致后面vscode中eslint插件的工作失败,不会自动审查错误代码,建议直接将该文件夹添加到工作区!!!
- public // 开发环境服务器监听 根目录
- index.html:单页面的页面
- favicon.ico:浏览器最上方图标 // 可以在index.html中的最后一段进行修改
-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-
- src // 源码目录
- assets // 存储 开发时用到静态资源 css js imgs fonts
- ***ponents // 存储开发时公共UI组件
- router // 路由配置
- store // vuex配置
- views // 存储路由组件
- App.vue // 根组件 作为 app应用实例的 config
- main.js // webpack入口文件
- .browserslistrc // postcss 浏览器兼容配置
- .eslintrc // eslint配置文件
- babel.config.js // babel配置es6转es5
- package.json
- vue.config.js // 项目开发时配置,可以在这里修改默认配置