VUE项目环境搭建及运行

旧城等待， 2023-07-05 14:45 25阅读 0赞

## VUE项目环境搭建及运行 ##

### 1. 下载node.js ###

去node.js官网的下载适合的版本，这里选择最新的node.js  
进行安装  
[https://nodejs.org/en/download/][https_nodejs.org_en_download]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]

### 2. 安装node.js ###

我把安装位置改成了`D:\developer_tools\nodejs\`

### 3. 更改npm下载位置（可选） ###

简单步骤如下：

1.  安装路径下创建两个文件夹：node\_global\_modules和node\_cache
2.  cmd下执行以下代码：

npm config set prefix D:\developer_tools\nodejs\node_global_modules
    npm config set cache D:\developer_tools\nodejs\node_cache

我习惯将下载的位置改成D盘，这篇文章写的比较详细，请参考以下链接  
[npm 配置自定义文件下载路径][npm]

### 4. 设置 npm 镜像以加速后面的过程（可选，或者使用科学上网工具） ###

更换成淘宝源

npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

### 5. 测试效果 ###

随便下载什么，看一下速度和位置  
比如下我下载一个jquery

npm install jquery -g

如果想卸载，可以使用卸载命令如下

npm uninstall jquery -g

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 1]

### 6. 安装一些必备的工具 ###

#### 6.1 安装 webpack ####

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了，其他都是细枝末节。

npm install webpack -g

##### 6.2 安装 vue-cli #####

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板  
，这个过程会耗时十几秒，等走完就好；到此整个环境搭建好

npm install vue-cli -g

#### 7. 运行项目 ####

**项目文件分析：**

一个比较典型的用webpack管理的vue项目应该有如下文件和文件夹：  
config/：定义代理的域名  
dist/: 整个前端项目用webpack打包后的目标存放文件夹，里面一般有build.js文件  
lib/: 开发时引用的一些依赖文件，最经典的就是jquery  
node\_modules/：用npm对项目依赖组件进行安装时就放在这个文件夹里。  
src/：自己写的源代码  
index.html：主页入口文件  
package.json和webpack.config.js：这两个文件是组件依赖关系和管理打包的配置文件

**vue项目运行步骤：**

1.  cd desktop/项目名称 或者在vsc终端打开
2.  进入项目之后安装依赖  
    npm install
3.  输入命令“npm run dev”，此时会用nodejs启动这个前端的vue项目

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200215192009719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c=,size_16,color_FFFFFF,t_70
[npm]: https://blog.csdn.net/Dreamboy_w/article/details/103492302
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200215194123660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c=,size_16,color_FFFFFF,t_70