Windows下vue环境搭建及第一个项目

╰+哭是因爲堅強的太久メ 2022-03-02 12:50 260阅读 1赞

### 一、环境说明 ###

系统：Windows；

开发工具：IDEA。

## ##

### 二、安装nodejs ###

*  **第一步**：**下 载nodejs**

下载地址：https://nodejs.org/en/，进入后选择下图中红色标记的位置，点击下载。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70][]

*  **第二步：安装nodejs**

安装的过程很简单，可以都点击Next。

*  **第三步：检查 nodejs是否安装成功**

安装完成后，进入CMD中输入命令node -v，如下图所示。显示了版本号，说明安装成功。

![20190320153707384.png][]

### 三、安装淘宝镜像npm ###

由于npm是国外的，在国内使用起来慢，所以使用淘宝的cnpm镜像来安装vue。淘宝的cnpm命令管理工具可以代替默认的npm管理工具。在CMD中输入如下安装命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装过程如下图，已经安装成功了。

![20190320154238122.png][]

### 四、安装vue脚手架vue-cli ###

淘宝镜像安装成功后，开始安装vue脚手架。在cmd中输入如下命令：

cnpm install --global vue-cli

安装的信息如下截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 1][]

### 五、新建项目 ###

**5.1 新建项目**

一般项目的路径不会在C盘，因为项目会越来越多。对于vue，初始化的文件量不小。所以先进入我使用的存放项目的目录。

*  **第一步：创 建项目**

进入CMD后，直接输入D：，进入D盘，然后输入：cd Work，进入D盘的Work目录。然后输入以下面命令：

--  first-vue是项目的名称
    vue init webpack first-vue

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 2][]

需要注意的是，输入命令后，有几个地方需要输入yes（Y/y）或No（N/n），下图中的几个地方，输入No就可以了。

![20190320162413203.png][]

看到下图的信息，说明项目已经创建好了。![20190320162451542.png][]

命令执行完成后，会在Work目录下创建first-vue目录，如下图所示：

![20190320162155461.png][]

*  **第二步：在项目中 安装依赖**

项目中各个模板之间都是相互依赖的，所以需要安装依赖（依赖的内容放在node\_modules文件夹下）。进入项目所在路径，在CMD中执行下面的命令：

cnpm install

![20190320163351632.png][]

**5.2 导入项目**

如果不是新建的项目，在SVN或Git上下载项目后，一般不会有node\_modules文件夹，这里存放了依赖。所以是直接运行不了的，要先运行cnpm install命令，下载依赖。如下图所示（红包标记的node\_modules原来是没有的，我执行了cnpm install命令才有的）：

![20190320170910212.png][]

**5.3 IDEA安装vue插件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 3][]

### 六、运行项目 ###

上面处理好了，下面来测试下刚才创建的项目。进入项目目录，输入以下命令（下面的命令会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改）：

cnpm run dev

![20190320165543612.png][]

![20190320165527353.png][]

运行后效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 4][]

其中run对应的是项目目录下package.json文件中scripts字段中的dev，如下截图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 5][]

*          修改运行端口

若要修改运行端口，找到项目中config目录下的index.js，有一块内容如下（原端口是8080，我改成了8083）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 6][]

### 七、打包 ###

打包命令如下：

npm run build

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 7][]

打包完后，会在项目目录下生成一个dist文件夹，里面包含了static、index.html等文件。为了测试打包有没有成功，打开index.html文件，若能正常访问应该是打包成功了。

但有几个地方需要注意：

1.  build目录下的utils.js，此文件中的publicPath属性的值（ 若打包后打不到图片这样的静态文件，可写成publicPath: '../../'，换成绝对路径）；
2.  config目录下的index.js文件中的assetsPublicPath（若打包后找不到js文件，可写assetsPublicPath: './'）；
3.  build目录下的webpack.dev.conf.js文件中的publicPath属性（publicPath: config.dev.assetsPublicPath），按住Ctrl，鼠标放在此属性的值上，若能跳转到config目录下的index.js文件中对应的assetsPublicPath属性，应该就OK。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70]: /images/20220302/51453f17bdeb446c97fc94cb935d86ae.png
[20190320153707384.png]: /images/20220302/e2f15f94a24347739680eb9f4d8aba5e.png
[20190320154238122.png]: /images/20220302/29cf9bff30474b8a946768831d584f2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 1]: /images/20220302/de27eec07d4d4531b3fc21d3917e09d5.png
[wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 2]: /images/20220302/e997b03b68494a9e981922cf09e51c6c.png
[20190320162413203.png]: /images/20220302/47c9d6abee9c4f22851d500298362b45.png
[20190320162451542.png]: /images/20220302/6cf2e4ef7cf248c3bbf16200dd249103.png
[20190320162155461.png]: /images/20220302/d942f72b40e54fd89db97862350f2f4d.png
[20190320163351632.png]: /images/20220302/1d90f20e4a1e497f9315d9e7615db37d.png
[20190320170910212.png]: /images/20220302/5d3e5221714c4ca38c14c9af59910dc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 3]: /images/20220302/47bce952dcd34754be777533271f6d0f.png
[20190320165543612.png]: /images/20220302/656989faf26348f6bd74ea532c10309c.png
[20190320165527353.png]: /images/20220302/372ac5b39cc7453b8fa42d9864cb93a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 4]: /images/20220302/8cd272dc26d648a69732bbd8b50bbeea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 5]: /images/20220302/baab9c15111f4f2daaaf4907942efa54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 6]: /images/20220302/335fcc5b86104ac38407dbd7b3016d19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpbnhpYW4yMDEyMA_size_16_color_FFFFFF_t_70 7]: /images/20220302/da234a6c577a4e4a9fd7a7ff31a53fde.png