vue

眺朢 2020-03-24

展开全文

vue-cli创建项目步骤解析

原创 @带甜味的盐@ 最后发布于2020-02-18 17:50:49 阅读数 151 已收藏

发布于2020-02-18 17:50:49

分类专栏：前端 SYW

本文链接：https://blog.csdn.net/s_y_w123/article/details/104379156

展开

vue-cli创建项目

一：安装vue-cli

前置条件：必须装过了node，不然没法使用npm命令。

下载vue-cli

yarn add @vue/cli -g
或
npm install @vue/cli -g
// 也可以使用cnpm下载

查看是否安装成功
```
// V 需要大写
vue -V
```
出现版本号就是安装成功。目前最新的版本是4.X

二：创建项目须知

前置条件：在你要创建项目的文件夹下，打开cmd,确保路径正确

输入命令：

vue create 项目名称
// 项目名称必须全部是小写字母

选择配置项：
- default (babel, eslint) 默认配置
- Manually select features 手动配置
选择默认配置，就一路enter到底了，最终生成的项目，不带路由，没有vuex，只有最基本的配置。

所以这里选择，手动配置。
选择项目所需的特色
1. Babel 转换高级语法【默认选中】
2. Typescript 高级的JavaScript语法
3. Progressive Web App (PWA) Support 渐进式Web应用程序(PWA)支持
4. Router vue路由
5. Vuex vue仓储
6. CSS Pre-processors css扩展语言 —> less，scss
7. Linter / Formatter 代码格式化程序【默认选中】
8. Unit Testing 单元测试
9. E2E Testing 端对端测试
一般我们的项目除了默认选中的，还需要有 Router路由 这个关键的。css扩展语言看个人是否需要，我这里需要，Vuex仓储，大项目用，小项目尽量不要用，但是我这里用。

所以我选择了:babel，typescript，router，vuex，CSS Pre-processors、Linter / Formatter

注意：
- Typescript 不会，就不要选了，项目默认是JavaScript。
- 创建完成之后的项目，路由那一块会用到路由的懒加载。
选完之后，会问你 ：
- Use class-style component syntax? 【使用类风格的组件语法?】
  
  写 Y
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 【使用Babel和TypeScript(现代模式需要，自动检测填充，置换JSX)? 】
  
  写 Y
- Use history mode for router? (Requires proper server setup for index fallback in production)【使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) 】
  
  如果你的服务器有配置，就写 Y 【这样路由中不会出现 # 号】，如果没有，就写 N
- Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)【选择一个CSS预处理程序(默认支持PostCSS、Autoprefixer和CSS模块) 】
  
  这里我选择的是sass/SCSS(with node-sass)
- Pick a linter / formatter config【选择linter / formatter配置】
  
  选择第一项即可 ESLint with error prevention only
- Pick additional lint features 【选择额外的linter功能】
  
  选择第一项即可：Lint on save
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?【你想让你的配置保存到哪里】
  两个选项，保存到专用的配置文件中或者是保存到package.json里.
  这个看个人意愿，我选择第一项。
- Save this as a preset for future projects? 【把它作为未来项目的预置?】
  
  写 N，毕竟每个项目需要的不一定相同。
选择完成之后，程序就开始自动进行模板的创建了。网速好的话，一会就能创建完成。

在末尾，会提示你通过cd 命令，进入到项目目录下，然后通过运行命令启动项目。

这些东西，在项目的README.md文件里会有体现。