（1）用vue写项目——项目准备

╰+哭是因爲堅強的太久メ 2022-04-15 05:43 372阅读 0赞

**方法一：**

**1. 下载安装nodejs和git**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

**2. 全局安装vue脚手架vue-cli**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

**3. 执行命令创建一个基于webpack打包工具的vue项目的文件夹**

![2018112211092195.png][]

命令会进入该项目的配置选项：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>Project name 项目名字</td> 
 <td>quna.com quna.com</td> 
 </tr> 
 <tr> 
 <td>Project description 项目描述</td> 
 <td>A Vue.js project about mobile web 一个关于移动端的vue项目</td> 
 </tr> 
 <tr> 
 <td>Author 作者</td> 
 <td>aoe aoe</td> 
 </tr> 
 <tr> 
 <td>Vue build</td> 
 <td>use arrow keys 使用方向键</td> 
 </tr> 
 <tr> 
 <td> Install vue-router 安装vue路由？ </td> 
 <td>yes</td> 
 </tr> 
 <tr> 
 <td>Ues ESlint to lint your code? 使用ESlint来链接你的代码</td> 
 <td>yes</td> 
 </tr> 
 <tr> 
 <td>pick an ESlint preset 选择一个ESlint预设</td> 
 <td>standard 标准的</td> 
 </tr> 
 <tr> 
 <td>Set up unit tests? 建立单元测试？</td> 
 <td>no</td> 
 </tr> 
 <tr> 
 <td> Set up e2e tests with Nightwatch? 建立e2e夜视测试？ </td> 
 <td>no</td> 
 </tr> 
 <tr> 
 <td> Should we run `npm install` for you after the project has been created? 在创建项目之后，是否应该为您运行“npm安装”？ </td> 
 <td>（recommended）npm 推荐 npm</td> 
 </tr> 
 </tbody> 
</table>

**4. 注意还有一个命令提示，需要进行下面两个命令的操作**

![20181122112655107.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3][]

**5. 此时项目会自动下载依赖和构建项目，完成后，项目中多了很多文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 4][]

**6. 让本地文件和GitHub上同步**

![20181122113443181.png][]

![20181122113457837.png][]

![20181122113515569.png][]

**7. 运行项目开启本地服务器**

（1）注意：用npm运行项目的时候，出现了很多的错误，超级多的错误，缺少各种依赖，npm install 出错，npm run build 出错，npm run dev出错，各种错误，折腾了很久，应该是npm的版本有问题，导致npm指令再获取各种包文件的时候，包的版本也是有问题的，或者确少各种包，使得无法开启本地服务器。最后用npm升级npm的时候，也是各种错误。

（2）使用yarn来运行项目：

1.） 执行命令进入配置项

![20181122155439758.png][]

2）. 配置项目，注意：最后选择的时候，选yes,use yarn

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 5][]

![20181122155608596.png][]

3）. 提示执行下面两个命令

![20181122155810601.png][]

就可以开启本地服务器

**方法二：**

1. 安装vue-cli脚手架

（1）window系统：

npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

（2）Mac系统全局安装vue-cli的时候

sudo npm install -g @vue/cli

2. 创建一个项目

（1）进入桌面创建一个名为vue-app的项目， **cd .. 文件后退一级**

提示：Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation?

**您的默认yarn注册表的连接似乎很慢。使用https://registry.npm.taobao.org进行更快的安装?**

![20190320132126664.png][]

（2）进行项目配置

![2019032013233749.png][]

这里有两个选项：

1）default（babel eslint）默认情况下，只配置babel和eslint；babel是es6转换为es5，eslint是检查代码风格

2）Manually select feature 手动的选择特性

**在cmd中我们可以通过上下键进行选择，而在git bash here进行选择，是通过数字0 1 2等来进行选择的**

这里我们选择2），进行手动的配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 6][]

**css Pre-processors：css预处理器，对sass、less等进行处理**

**linter检查代码风格**

该项目中，我们只使用babel，**空格键**是选择或者不选中

**然后：将这些分配文件放在各自的文件夹中，还是都放在package.json文件中？**

![201903201339324.png][]

选择 **In package.json**

**然后：** Save this as a preset for future projects? (y/N)

是否要保留这个预设用于以后的项目？

可以**保留**，以后用的时候，**在选择配置项的时候，就会出现这个预设的选项**

**然后：**Save preset as:保存预设叫做什么？（给这个预设起个名字）

——————————————————————————————————————————————————

**如何删除这个预设呢？**

**.vuerc文件是保存自定义预设的，可以对该文件进行修改**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 7][]

**把该配置删除就可以删除该预设 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 8][]

————————————————————————————————————————————————

**然后：**Pick the package manager to use when installing dependencies: (Use arrow keys)

选择要在安装依赖项时使用的包管理器:(使用箭头键)

> Use Yarn  
  Use NPM

选择后项目就会进行配置安装各种依赖包

然后：成功的创建了这个项目，开始下面的这两个命令

![20190320135518583.png][]

**方法三：用vue UI来创建项目**

1. 执行vue ui 启动成功后浏览器将直接打开一个新的窗口：vue 项目管理器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 9][]

1）点击创建，在对应的路径下创建一个文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 10][]

2)设置名字、包管理工具等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 11][]

3）选择预设

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 12][]

4）成功后就可以对项目进行界面化的操作

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 13][]

————————————————————————————————————————————————————

当我们再次通过vue ui创建项目的时候，会直接进入4）的页面，是因为以下文件配置的原因：

![20190320152953776.png][]

该文件的内容为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 14][]

把里面配置的内容删除后，通过vue ui创建项目的时候，就会进入项目创建页面

清空该内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 15][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220415/f67790e65c6545df9a1dad524678a3f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20220415/15949afb5ca34a3e96f7340d2e494fe9.png
[2018112211092195.png]: /images/20220415/2fb40cd4554446c8a39f438e262fb0e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20220415/0ef343ba8f77485da1741fec69993f0c.png
[20181122112655107.png]: /images/20220415/df5e1286dcd14bc78bb04323b58a8f9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20220415/f456c1d6e0c44889b505da7f130237b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20220415/5fa728f557694ab8b1591b9f141501ba.png
[20181122113443181.png]: /images/20220415/a9fd67e200ad41508018444efe4d533a.png
[20181122113457837.png]: /images/20220415/fddc21d997d749279fe702b6c44375d6.png
[20181122113515569.png]: /images/20220415/b6bfa84e7fbf4af799c0cb06ee58cd87.png
[20181122155439758.png]: /images/20220415/7f72ce04cff6439bbec7729482f71e4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20220415/0f97a271cb2f47978b9d2abbf1bdffab.png
[20181122155608596.png]: /images/20220415/684b219bc42e4206bd38735c2bbf8f6b.png
[20181122155810601.png]: /images/20220415/3c4e60e8c7d1474fb0d4bebdf224ebf9.png
[20190320132126664.png]: /images/20220415/988146bacb184fe3b45c9b90f82d14ee.png
[2019032013233749.png]: /images/20220415/41c4250e80e846c98475b4813bec995f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 6]: /images/20220415/30b63d0fdbd54128bfbb0c3545da9905.png
[201903201339324.png]: /images/20220415/8090528f502548bb8d2c27afd1b2d33b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 7]: /images/20220415/fd4efb832c1b4ef68872c3a26a0daac2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 8]: /images/20220415/3d7e6701dd224f02a9da2f3c78b766c6.png
[20190320135518583.png]: /images/20220415/20544b34e957413889d4323e8ac7d515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 9]: /images/20220415/4c82ef973c634259a74776a6d3dccc7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 10]: /images/20220415/cc3359f0bffd4c9f93ac63881a5a7acb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 11]: /images/20220415/19ff9dab71654b94a695d82603af992b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 12]: /images/20220415/fad735d090d04745ab85884f731e5975.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 13]: /images/20220415/97870cd3e46b4214993f9abd2ca36b0a.png
[20190320152953776.png]: /images/20220415/ff81a9a4b48d42889f593b9387cea6a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 14]: /images/20220415/5af5f1e3bd5d496ea245e2e23920494c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 15]: /images/20220415/7bc1b0972c6f40e1b136026ba99c33a4.png