vue环境的搭建

以你之姓@ 2021-10-18 13:16 423阅读 0赞

最近，老大给了我一个前后端分离的项目，叫我跑起来去看看里面的流程和代码，该项目前端是由vue写的，这就需要给本机搭建vue环境，搞了一上午才把项目跑起来，因为这个node和vue都是我以前没接触过的前端，在此把搭建过程记录下来。

在搭建vue的开发环境之前，一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，而vue-cli是Vue 提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

#### 目录 ####

1.node安装  
2.vue-cli的脚手架安装(官方命令行工具)  
3.用vue-cli创建vue项目

#####  #####

### 1、 node.js的安装 ###

node可以在百度node.js官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，node.js都是傻瓜式安装，全部点next就好了。网址：[https://nodejs.org/en/][https_nodejs.org_en]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190812112634390.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 6]  
Window+R 打开运行窗口，输入cmd命令，　  
查看是否安装成功  
（新版本node在安装时会自动配置环境变量，一些老版本的需要手动配置环境变量，可自行上网查询配置步骤）  
　　A、node -v //查看 node 版本  
　　B、npm -v //查看 npm 版本  
　　C、node //查看node相关信息  
　　![在这里插入图片描述][20190812113516505.png]

#####  #####

### 2、 vue-cli的脚手架安装(官方命令行工具) ###

由于npm的服务器是在国外的，使用起来比较慢，该处与Maven的使用一样，都是改成阿里的镜像，我们这里使用淘宝的cnpm镜像来安装vue，以此加快下载依赖包的速度。

淘宝的cnpm命令管理工具可以代替默认的npm管理工具，

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

可输入`cnpm-v`来检查是否安装成功![在这里插入图片描述][20190812114437771.png]  
安装全局vue-cli脚手架  
淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，  
输入命令：`cnpm install --global vue-cli`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 7]  
验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；  
输入命令`vue`检查是否安装成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 8]

#####  #####

### 3、用vue-cli创建vue项目 ###

现在命令符进入你要创建项目的目录里，如在我的F:\\Workspaces\\WebStorm 2019.2目录创建vue项目，则直接输入`cd F:\Workspaces\WebStorm 2019.2`再改变盘符`F:`回车，  
![在这里插入图片描述][20190812124321505.png]  
也可以直接在目标目录Shift+鼠标右键，点击【在此处打开命令窗口】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 9]  
使用命令窗口创建项目命令：  
`vue init webpack 项目名`  
如创建一个名为vuedemo01的vue项目的命令：

vue init webpack vuedemo01

模版下载成功后会有一些交互的项需要填写：

Project name vuedemo01 # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，
     如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
     
     Project description A Vue.js project # 项目描述,随便写,也可直接回车
     
     Author # 作者名称,也可直接回车
     
     Vue build standalone # 我选择的运行加编译时,也可直接回车
    	Runtime + Compiler: recommended for most users
    	
     Install vue-router? Yes # 是否需要 vue-router，路由肯定要的,也可直接回车
     
     Use ESLint to lint your code? No # 是否使用 ESLint 作为代码规范，这是代码检查器，首次创建vue可以先不使用这个，
     不然你稍微少/多写一个空格就会报错，由于你不熟悉vue语法会很难找错误,输入n回车
     
     Pick an ESLint preset Standard # 一样的ESlint 相关，当你上一步输入n选择NO时，
     这一步不会出现
     
     Set up unit tests Yes # 是否安装单元测试,也可直接回车
     
     Pick a test runner 按需选择 # 测试模块,也可直接回车
     
     Setup e2e tests with Nightwatch? 安装选择 # e2e 测试,也可直接回车
     
     Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，我选的NPM,也可直接回车

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 10]  
安装成功后，你去打开安装的目录就会有一个新创建的vuedemo01项目  
![在这里插入图片描述][20190812134103521.png]  
项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 11]  
若是安装不成功即项目vuedemo01目录没有node\_modules文件夹，可以Ctrl+C结束安装，再cd进入项目vuedemo01目录，执行命令`cnpm install`进行初始化，安装我们的项目依赖包，也就是安装package.json里的包，安装完后可以看到项目里会新建了一个node\_modules文件夹。  
![在这里插入图片描述][20190812134613333.png]  
运行项目  
命令行进入项目vuedemo01目录执行`npm run dev`  
![在这里插入图片描述][2019081213501984.png]  
成功启动会提示浏览器访问的地址：  
![在这里插入图片描述][201908121350575.png]  
浏览器访问的地址：[http://localhost:8080][http_localhost_8080] 就能看到欢迎页面，若页面加载不出来可能是本地8080端口被占用，需要修改一下配置文件config里的index.js的post即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 12]  
该处使用WebStorm打开新建的vuedemo01项目可以看见已经添加了许多文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 13]

##### 第二种创建项目命令 #####

vue官方提供第二种创建简介的vue项目的命令： `vue init webpack-simple 项目名`  
，该种项目创建是没有语法检查的，所以使用该命令创建的项目就不会再提示你确认路由、语法检查等操作，使用该命令创建vuedemo02项目。

首先命令符进入你要创建项目的目录里，如在我的F:\\Workspaces\\WebStorm 2019.2目录创建vue项目，则直接输入`cd F:\Workspaces\WebStorm 2019.2`再改变盘符`F:`回车，  
输入创建的命令 ：`vue init webpack-simple vuedemo02`  
![在这里插入图片描述][20190812140309712.png]  
是否使用sass？输入y回车，使用sass。  
sass是专业级CSS扩展语言,我不是搞前端的，不是太懂这个。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 14]  
与上面同理，创建中出错时可以Ctrl+C结束安装，再cd进入项目vuedemo02目录，执行命令`cnpm install`进行初始化

创建成功后，你去打开安装的目录就会有一个新创建的vuedemo02项目.  
![在这里插入图片描述][20190812140517619.png]  
进入该vuedemo02项目就会发现项目的结构比之前的简单了许多  
![在这里插入图片描述][20190812140556543.png]  
但会发现没有存放依赖的node\_modules文件夹，因为这种创建文件夹方式没帮你自动创建依赖，需要自己手动创建，输入命令：`cnpm install`或者是国外服务器`npm install`  
![在这里插入图片描述][20190812145354120.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 15]  
启动命令与上一步一样`npm run dev`

#### 总结 ####

1、搭建vue 的开发环境，安装vue 的脚手架工具官方命令行工具

npm install --global vue-cli / cnpm install --global vue-cli

2、创建项目必须cd 到对应的一个项目里面

vue init webpack vue-demo01
    cd vue-demo01
    cnpm install / npm install
    npm run dev

3、另一种创建项目的方式（推荐） \*\*\*

vue init webpack-simple vuedemo02
    cd vuedemo02
    cnpm install / npm install
    npm run

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]: /images/20211018/3697294d07bd4051956a569278a72c2e.png
[20190812112634390.png]: /images/20211018/02c92e5bef424e9482ad0490990b66b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 1]: /images/20211018/ae865685f78b46529eb6698dfa3278e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 2]: /images/20211018/beaf8aba52b04c46b7c22d3958635191.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 3]: /images/20211018/81f66c957ea54f07afd46ce908dcec4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 4]: /images/20211018/3774146570134ac49d49f4075ef5420e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 5]: /images/20211018/77ed66f3b3744d4188aaedd7fb322ee6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 6]: /images/20211018/b62854faabc841f6a9fe4ac095ba3f07.png
[20190812113516505.png]: /images/20211018/63be93392c3c4f2d8fc169303ae1dbf7.png
[20190812114437771.png]: /images/20211018/f04405be5b9f4f0dabf559c72cadee8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 7]: /images/20211018/734ff4cea7bc46d98faf5a79c7a97bbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 8]: /images/20211018/fab7625ba4944240b45914c90a1f7b22.png
[20190812124321505.png]: /images/20211018/343927e7f3c442b8aa178f816c8a2e94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 9]: /images/20211018/ad84aecb10c4405fb40d81b7d411bd89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 10]: /images/20211018/e73e10151b6140359afc320f8b96dfe6.png
[20190812134103521.png]: /images/20211018/fcf4fe964ca94138ab735938e90098b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 11]: /images/20211018/361def5e4a8b4efaa3fa562148a055eb.png
[20190812134613333.png]: /images/20211018/428d95bd2f3047d3b128d9b65db7ed81.png
[2019081213501984.png]: /images/20211018/84f79909cb8742b99cfa96b37304ad24.png
[201908121350575.png]: /images/20211018/d5af7a01bdba478da8401acc2b4bf5f9.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 12]: /images/20211018/2e3c4d4e35b440c68f0006dbfcf77eab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 13]: /images/20211018/9d52eaaa0eb04fcf872b963274f170c2.png
[20190812140309712.png]: /images/20211018/c7c4f87464a24e15b64ccf3c92cd5e7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 14]: /images/20211018/859d9303e728452e88f18e3e25cf39e3.png
[20190812140517619.png]: /images/20211018/c6c33a8344114baabd40446931176c31.png
[20190812140556543.png]: /images/20211018/4fe004e689f24517a7eb1c3271158786.png
[20190812145354120.png]: /images/20211018/8ac47235f67a4718b4d07b6d6001419b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 15]: /images/20211018/673c78406ee94c51bba4577fec84e618.png