vue-cli3以下版本
通过 vue init 命令来初始化项目，具体的使用方法为
vue init <template-name> <project-name><template-name>：表示模板的名称，vue-cli官方为我们提供5中模板可供选择
- webpack：一个全面的 webpack+vue-loader 的模板，功能包括热加载、css扩展等。
- webpack-simple：一个简单 webpack+vue-loader 的模板，不包含其他功能，让你快速的搭建vue的开发环境。
- browserify：一个全面的 Browserify+vueify 的模板，功能包括热加载等。
- browserify-simple：一个简单 Browserify+vueify 的模板，不包含其他功能，让你快速的搭建vue的开发环境。
- simple：一个最简单的单页应用模板。
<project-name>：为你项目的名称
webpack模板
一般我们会使用 webpack 模板来进行初始化，在命令行内输入 vue init webpack vueclitest。在我们输入命令后，会询问我们一些简单的选项，我们根据我们的需求进行选择即可。
- Project name：项目名称，如果不需要更改的话，直接点击回车即可。但是这里不能使用大写。
- Project description：项目描述，默认值为 A Vue.js project。
- Author：作者，如果你已经配置过Git设置，那么他会进行读取。
- Install vue-router？：是否安装vue的路由插件，我们这里是需要的，选择 Y。
- Use ESLint to lint your code?：是否使用 ESLint 来限制你的代码风格和错误，根据自己的需要进行选择。
- setup unit tests with Karma + Mocha?：是否安装单元测试工具 Karma + Mocha，根据自己的需要进行选择。
- Setup e2e tests with Nightwatch?：是否安装e2e来进行用户行为模拟测试，根据自己的需要进行选择。
在选择完以后，我们的项目就创建完成了，然后我们在命令行输入 cd vueclitest 进入到我们vue的项目中，在输入 npm i 将我们项目的所有依赖进行下载，再下载完成后，就可以输入 npm run dev 来运行我们的项目了，运行后会在编译完成后，给你一个网址，直接 Ctrl + 鼠标左键 点击网址即可。
vue-cli3以上版本初始化
使用create初始化项目
vue-cli3以上的版本，使用 vue create <project-name> 命令来进行创建项目。我们在编译器的终端中输入 vue create vueclitest 命令敲回车后，便会出现3个选项，前两个为默认的预设配置，第一个为vue2的预设配置，第二个为vue3的预设配置，如果选择前两个来创建项目，一路敲回车即可。第三个为手动选择配置，由我们自己来选择自己项目中需要的配置来进行初始化项目。
我们选择第三个选项开始手动配置，首先会出现一个配置表，我们自己选择你项目中需要的。按空格为选择或取消，按 A 键为全选，I 键为全部反选。
- Choose Vue version：选择Vue版本，有 vue2.x 和 vue3.x 可供选择。
- Babel：支持高阶语法转换。
- TypeScript：支持使用 TypeScript。
- Progressive Web App (PWA) Support：支持PWA。
- Router：路由管理器。
- Vuex：支持 vuex。
- CSS Pre-processors：css预处理器。
- Linter / Formatter：代码风格、格式校验。
- Unit Testing：单元检测。
- E2E Testing：E2E测试。
根据项目需要选择完成后，点击回车。然后还会出现一些选项让你进行选择。
- Choose a version of Vue.js that you want to start the project with：选择Vue版本。
- Use history mode for router?：是否使用路由的 history 模式，我选择的是 Y。
- Pick a CSS pre-processor：选择你的css预处理，我选择的是scss。
- Pick a linter / formatter config：选择Eslint代码验证规则，我们这里选择ESLint + Standard config 标准配置。
- Pick additional lint features：语法检查规则，我选择的是Lint on save，在保存时进行检查。
- Where do you prefer placing config for Babel, ESLint, etc.?：选择配置文件的存放位置，选择 In dedicated config files，在专用的配置文件中。
- Save this as a preset for future projects?：是否保存配置，可以选择 Y，这样我们可以在下次构建项目的时候，直接使用这次的配置进行构建。
在将配置手动选择完成后，我们的项目也就开始初始化了，在初始化完成后，和之前一样在终端输入 cd vueclitest ，进入你刚刚构建的项目中，然后 npm i 下载依赖，在依赖下载完以后，这里需要注意，我们使用create初始化的项目，启动项目的命令不再是 npm run dev ， 而是 npm run serve ，然后项目启动完成后，Ctrl + 鼠标左键点击网址即可看到我们的项目了。
使用init初始化项目
vue-cli3以后，和旧版使用了相同的 vue 命令，所以 vue-cli2 被覆盖了，所以我们如果还需要使用旧版的 vue init 功能，就需要全局安装一个桥接工具。安装完成以后，我们就可以和vue-cli2一样继续使用，vue init <template-name> <project-name> 命令来创建项目了。
npm i -g @vue/cli-init图形化界面
vue-cli3以后，多了一个图形化界面的功能，我们在 cmd 命令行工具内输入 vue ui 命令来启动该功能。
在启动图形化界面后，我们点击创建，它默认的创建目录为C盘，我们可以点击上一层按钮，或者点击编辑路径按钮，来选择我们项目的路径。
然后点击 在此创建新项目，我们进入到创建界面，项目文件夹哪里，我们输入我们项目的名称就好了，包管理器选择 npm ，初始化Git仓库打开，然后点击下一步。然后会让我们选择预设配置，和使用 vue create 初始化项目一样，有默认配置和手动配置，但是这里多了一个可以从我们的git仓库中拉取预设的配置，我这里选择了默认的vue2配置，点击开始创建即可。
在创建完成后，会自动跳转到项目仪表盘界面，然后我们点击任务，再点击 serve ，开始运行项目，在项目编译完成后，再点击启动app按钮，我们就可以看到项目了。
评论 (0)