vue环境搭建

作者: 曲昶光 | 来源:发表于2021-08-12 20:03 被阅读0次

前端环境搭建
vue+ionic
Vue之ToDoList实战
vue-vscode开发环境搭建
Mac上搭建vue环境
vue-cli单页面应用
Vue开发环境搭建与创建项目
Express+Vue+MongoDB
2019-06-15
Vue(7)

转载来源：https://www.cnblogs.com/shenyf/p/8341641.html

搭建node环境

下载

1.进入node.js官方网站下载页，点击下图中框出位置，进行下载即可，当前版本为8.9.4，下载网址为：https://nodejs.org/zh-cn/download/

2.至于什么是LTS，请参考该知乎问题：https://www.zhihu.com/question/35512237，总之LTS意味着更加稳定，因此此处选择安装该版本，具体请依照自身需求。

image

安装

1.安装十分简单，只需双击刚下载完成的node-v8.9.4-x64.msi文件，期间可以更换安装路径，其余只需点击下一步直至安装完成即可，

2.如下图所示，则表示安装成功。

image

测试

1.安装完成则自动安装好了npm这个包，并且自动将路径配置到系统路径中，使用windows+R快捷键，输入cmd，即打开命令提示符窗口，通过如下命令查看是否安装成功；

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">node -v --查看当前node版本
npm -v --查看当前npm版本</pre>

2.得到如下图所示，则表示安装成功。

image

安装cnpm

1.由于使用npm工具会自动去查找国外的网站下载包，可能会被防火墙屏蔽导致下载失败，因此我们需要安装cnmp淘宝镜像来代替npm，使用cnpm下载包会大大提高下载速率；

2.安装方式，在命令提示符窗口，输入如下命令，等待1至2分钟即可

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">npm install cnpm -g --安装cnpm，-g代表全局</pre>

3.使用如下命令查看cnpm是否安装成功

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">cnpm -v --查看当前cnpm版本</pre>

4.如下图所示，则表示cnpm安装成功。

image

安装webpack

1.至于为什么要安装webpack，可以参考这篇博客：ht tps://www.cnblogs.com/-walker/p/6056529.html ，或者参考webpack中文官方文档：https://doc.webpack-china.org/

2.安装webpack只需要一条命令即可

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">npm install webpack -g --全局安装webpack</pre>

3.使用如下命令查看是否安装成功

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">webpack -v</pre>

4.如下图所示，则说明安装成功

image

安装vue-cli

1.安装vue-cli同样只需要一条命令即可

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">npm install vue-cli -g --全局安装vue-cli</pre>

2.具体方式，同上，这里不再做详细叙述。

正式开始一个vue项目

1.下面准备在D盘目录下的WebstormProjects下创建一个vue项目

2.首先按照下图中所示方式进入到当前目录下的cmd窗口

image

3.在Cmd命令窗口输入如下命令，新建一个vue项目

vue init webpack my-project

4.在建立vue项目中主要需要输入如下信息

Project description A Vue.js project  --项目描述，直接默认回车
Author syf                            --作者姓名，输入名字（syf）回车
Install vue-router? Yes               --是否安装路由，输入y回车
Use ESLint to lint your code? No      --是否用ESLint规范代码，输入n回车
Set up unit tests No                  --是否需要单元测试，输入n回车
Setup e2e tests with Nightwatch? No   --是否需要单元测试，输入n回车```

5.进入到my-project文件夹下

cd my-project

6.安装依赖

cnpm install

7.启动项目

npm run dev

8.具体过程如下所示