Vue - 如何搭建一个Vue项目

一、安装node环境

1. 下载安装 node

   node地址：https://nodejs.org/en/

2. 安装完成，检查是否安装成功

   输入以下命令，正确输出版本号说明成功：
   node -v
npm -v

   

3. 全局安装vue-cli

   npm install --global vue-cli

二．搭建vue项目环境

方法一：vue init

1. 进入 cmd 面板，使用vue init 命令初始化项目：

   vue init <template-name> <project-name>

   init : 表示用vue-cli来初始化项目
   <template-name> : 模板名称，开发中一般都会使用webpack模板。
   <project-name> ：项目名称，可以根据自己的项目来起名字。
   

2. 输入命令后，进入项目选项，根据需要进行填写：
   
   Project name 项目名称 。
   Project description 项目描述，默认为A Vue.js project,直接回车
   Author 作者，如果有配置git的作者，将会读取。
   Vue build 打包方式，回车即可；
   Install vue-router? 是否安装vue的路由插件，选择Y
   Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。这里不需要输入n，如果是大型团队开发，最好进行配置。
   setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，这里不需要，所以输入n。
   Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试，这里不需要，所以输入n。
   Should we run npm install for you after the project has been created? 项目创建后，我们是否应该为您运行“npm install”？根据自己需要进行选择，这里用的是npm，直接回车。

3. 命令页面出现上下的文字，说明项目已经初始化完成。
   
   cd element-demo：进入vue项目目录。
   npm run dev：运行程序。

方法二：vue create

1. 进入 cmd 面板，使用vue init 命令初始化项目：

   vue create <project-name>

   <project-name> ：项目名称，可以根据自己的项目来起名字。

2. 选择配置

   这里选的第三项，自定义配置（通过上下键切换配置）。

   
   Default([Vue 3] babel, eslint) vue3 项目默认配置，只包含js编译器babel，代码检测工具eslint。
   Default([Vue 2] babel, eslint) vue2 项目默认配置，只包含js编译器babel，代码检测工具eslint。
   Manually select features 自定义配置，选择添加需要的功能，提供更多的特性选择。

3. 根据需求，选择需要安装的配置

   通过上下键切换配置，按空格键选中或取消选中配置。

   
   Babel js编译器，es6 转 es5
   Typescript js的超集，使用 TypeScript 书写源码
   Progressive Web App (PWA) Support PWA 支持，渐进式的网页应用程序
   Router vue的路由
   Vuex vue的状态管理
   CSS Pre-processors css的预处理器
   Linter/Formatter 代码风格检测与格式化
   Unit Testing 单元测试
   E2E Testing E2E测试

4. 选择 Vue 版本，

   这里选的 vue2 版本

   

5. 路由模式

   是否采用history模式来创建路由，这里选择 yes

   

6. CSS预处理器

   这里选择第一个Sass

   

7. 配置文件的存放位置

   1.配置文件是放在独立的配置文件中（选项一），还是放在package.json中（选项二）。
   2.这里选择了第一个

   

8. 是否保存此次配置，用于将来的项目

   1.如果选择yes，那么在之后创建项目时，在选择配置时，选项除了两个默认配置和手动配置外，还将增加此次的配置。
   2.这里选择 yes。

   

9. 为此次配置自定义一个名称，用于之后的选择；选择no将没有此步骤
   

10. 使用哪一种包依赖管理器，这里选择了 NPM
    

11. 出现以下界面，项目创建完成
    
    cd demo 进入项目目录。
    npm run serve 运行项目。

12. 拓展：删除 步骤8、9 的自定义配置

    1.找到 C:\Users\Administrator 下的 .vuerc 文件进入，删除指定的预设模板。
    2.找到 C:\Users\Administrator 下的 .vuerc 文件，直接将 .vuerc 文件删除，删除所有预设配置。

    

方法三：vue ui （可视化界面）

1. 进入 cmd 面板，运行如下命令。

   vue ui

   

2. 打开地址，出现如下界面。
   

3. 进入创建模块，选择项目存放地址，创建项目。
   

4. 填写项目名称，去掉git覆盖选项，点击下一步。
   

5. 进入预设，选择手动配置，点击下一步。
   

6. 根据需求，选择需要安装的配置，点击下一步。

   参考方法二：vue create 创建项目 步骤3

   

7. 选择 Vue 项目版本，及需要的配置，点击创建项目。
   

8. 是否将功能和配置保存为一套新的预设。

   这里选择了保存

   

9. 项目创建完成。
   

10. 拓展：删除 步骤8 的自定义配置(

    等同方法二：vue create 创建项目 步骤12
    1.找到 C:\Users\Administrator 下的 .vuerc 文件进入，删除指定的预设模板。
    2.找到 C:\Users\Administrator 下的 .vuerc 文件，直接将 .vuerc 文件删除，删除所有预设配置。