如果你还没有安装 VueCLI ?请执行下面的命令进行安装或是升级:
npm install --global @vue/cli
按住 shift 鼠标右键 打开PowerShell
方法一 :??vue init webpack xxx
在命令中输入以下命令创建Vue项目:
输入 vue init webpack demo727
Project name (demo727) 项目名字 (确定则回车)
Project description (A Vue.js project) 项目描述 (确定则回车)
Author muxinzzz <719014610@qq.com> 作者 (确定则回车)
Vue build (Use arrow keys) 构建模式，默认选择第一种
> Runtime + Compiler: recommended for most users 运行时+编译器：建议大多数用户使用
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅限运行时：大约6KB min+gzip，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数
Install vue-router? (Y/n) 是否安装引入vue-router 建议y
Use ESLint to lint your code? (Y/n) 是否使用ESlint语法 eslint的格式验证非常严格，多一个空格少一个空格都会报错 建议n
Set up unit tests (Y/n) 否设置单元测试 建议n
Setup e2e tests with Nightwatch? (Y/n) 是否和Nightwatch建立端到端的测试 建议n
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 是否在项目创建之后运行“npm install”(建议）
> Yes, use NPM 是的 用npm 建议默认
Yes, use Yarn 是的 用yarn 跟npm没什么大的区别
No, I will handle that myself 不 我要自行安装 (选择此项之后 后续仍通过npm install 再次安装)
.......回车之后 等待安装
cd demo727 进入项目目录
npm run dev 运行项目方法二 :??vue create xxx
在命令中输入以下命令创建Vue项目:
vue create toutiao-m
回车 让你选择创建的模式 default是默认模式
建议选择手动方式 支持更多工具的自定义 Manually select featuews
回车 接下来让你选择在项目中需要集成的工具 例如: 按空格键选中/取消
(*) 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
回车 接下来会问你是否使用 history 作为你的路由模式
(history模式的url比较简洁 但是兼容性不太好) 所以我们选no
回车 接下来会让你选择要使用那个css处理器
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
前两种都是sass 只是编译器不太一样
从使用角度这几种大同小异 可以选择 第三种 Less
回车 接下来让你选择你的代码校验要使用哪种校验规范
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
推荐选第三种
回车 接下来让你选择在什么情况下触发格式校验
(*) Lint on save 当我们去修改保存文件的时候
(*) Lint and fix on commit 当我们去执行 fix commit提交的时候
这边建议两种都选上
回车 接下来让你选择 Babel, ESLint 生成的配置信息放哪
In dedicated config files 生成独立的配置文件当中
In package.json 是把上面的配置信息和package.json写到一起
推荐 独立配置文件中 这样子查看和维护更加方便
回车 接下来问你Save this as a preset for future projects? (y/N) 是否将你刚才的一系列选择来保存一下 下次可快速创建全新的项目
如果需要 可以输入 y 然后起个名字
如果不需要 输入no
回车 然后根据提示来
cd toutiao-m
npm run serve
然后可以看到:
- Local: http://localhost:8080/ 这是本机访问
- Network: http://192.168.1.6:8080/ 这是局域网可以访问方法三 : vue ui 创建项目
1. 在命令中输入? vue ui
2. 点击左上角的下拉选? 选择Vue项目管理器
3. 选择要创建的文件的目录地址??点击 在此创建新项目?
4. 填写项目文件夹名称? ?社会中包管理器? 建议npm
5. 选择 预设? 我这边选择手动
6. 如下图? 选择你想要的功能
1.Choose Vue version（选择版本号）在下一步配置中可以选择 2.x 或3.x
2.Babel（在webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中）
3.TypeScript（支持typeScript写源码）
4. Progressive Web App (PWA) Support（这个意思暂且不明白）
5. Router（自动配置路由）
6. Vuex（自动配置vuex 全局状态管理）
7. CSS Pre-processors（支持css预处理器）
8. Linter / Formatter（代码规范）
9. Unit Testing（支持单元测试）
10. E2E Testing（支持E2E测试）
7. 最后配置??
上一步选择了choose vue version? 则在配置页可选择2.x 或者3.x
①ESLint with error prevention only?只配置使用 ESLint 官网的推荐规则
②ESLint + Airbnb config? ? ? 配置使用 ESLint +Airbnb 规范
③ESLint + Standard config?通用规范 ?配置使用 ESLint + Standard 第三方的配置(一般选择此项)?
④ESLint + Prettier? 比较漂亮的规范? ? ? Prettier 主要是做风格统一。代码格式化工具
?8. 点击下方的创建项目? 则创建完成
?
?
?