关于Vue CLI创建（使用了vuex）

最新推荐文章于 2024-11-22 15:28:14 发布

原创最新推荐文章于 2024-11-22 15:28:14 发布 · 225 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用VueCLI创建项目，包括安装VueCLI、创建项目、选择预设选项、安装依赖、配置路由、CSS预处理器、代码校验工具等。在创建过程中，选择了手动配置并详细列举了每个步骤的选择，如使用Babel、Vue Router、Vuex、Less作为CSS预处理器，以及选择ESLint+Standard代码规范。项目创建完成后，通过npm命令启动项目并访问浏览器中的URL即可看到项目运行成功。

使用 Vue CLI 创建项目

如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：
npm install --global @vue/cli

在命令行中输入以下命令创建 Vue 项目：
```
vue create my-vue
```
选择安装预设
- default：默认勾选 babel、eslint，回车之后直接进入装包
- manually：自定义勾选特性配置，选择完毕之后，才会进入装包
- 选择第 2 种：手动选择特性，支持更多自定义选项
安装项目中需要使用的库以及功能，分别选择以下几个模块
- Babel：es6 转 es5
- Router：路由
- Vuex：数据容器，存储共享数据
- CSS Pre-processors：CSS预处理器，后面会提示你选择 less、sass、stylus 等
- Linter / Formatter：代码格式校验
配置路由模式
是否使用 history 路由模式，这里输入 n 不使用
选择 CSS 预处理器
- 项目中选择 Less
选择代码格式规范
- 选择 ESLint + Standard config
选择在什么时机下触发代码格式校验
- Lint on save：每当保存文件的时候
- Lint and fix on commit：每当执行 git commit 提交的时候
- 这里建议两个都选上，更严谨
额外的配置文件的配置
- Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里
  - In dedicated config files：分别保存到单独的配置文件
  - In package.json：保存到 package.json 文件中
- 里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置
是否保存配置预设
- 这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用
- 这里根据自己需要输入 y 或者 n，我这里输入 n 不需要
向导配置结束，开始装包，安装包的时间可能较长，请耐心等待…
安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入
进入你的项目目录，并启动项目
项目运行成功
- 启动成功，命令行中输出项目的 http 访问地址
- 打开浏览器，输入其中任何一个地址进行访问
如果能看到该页面，恭喜你，项目创建成功了