使用VSCode创建一个Vue项目

约定不等于承诺〃 2024-04-23 20:06 74阅读 0赞

#### 1. 下载 Node.js ####

官网地址：[Node.js][] ，选择长期维护版下载。

![235a29036b896ed90c3682f172e02efd.png][]

安装时可以自己选择安装位置，然后一直选择 next 即可。安装完成后，打开命令行窗口，输入 **node -v ，**出现了版本号信息就表示已经成功安装。

![a7f3ffa4ad83839196fa63ca23bd2bc9.png][]

配置环境变量：node.js会在系统变量Path里自动配置好:

![1d21f2773cbd9674ce037b21341d4f20.png][]

#### 2. 安装 npm ####

由于NPM的仓库资源在国外，传输速度较慢。所以使用淘宝镜像源npm。

同样打开命令行窗口，运行以下命令进行安装。

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

查看镜像是否安装成功：

npm config get registry

如下即说明镜像安装成功：

![912693c98187b3fff2cbbbd28a52d06a.png][]

#### 3. 安装 vue-cli (vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板) ####

npm install -g @vue/cli

检查 vue-cli 版本：命令行窗口输入：**vue -V**

如下即为安装成功。

![241624874679bc9ce90760f3775ff9bb.png][]

#### 4. 安装 webpack ####

*  webpack--一个静态的模块化打包工具，最终可以将代码打包成静态资源部署到服务器
 *  npm install webpack –g \# 全局安装

#### 5. 创建项目与安装相关依赖 ####

*  在 VSCode 打开想要创建项目的文件夹，ctrl+j 打开控制台，也可以使用命令窗口进入到对应的文件夹，输入：Vue create project\_name。注意：这里需要管理员权限运行cmd

*   *  vue create 项目名称

![c864eb5639e485b99e96f2033eddb944.png][]

选择 Manually select features，点击回车

![88857d6627b3a1c9c5a82e26333ad071.png][]

暂时选择 Bable 和 Router 两个选项，后续可以根据需要自行进行添加。空格是选择和取消选择，选好后回车进行下一步。

![9f34e34eea5009806f08024b1f87ca58.png][]

![5d7ac2efffb2fd28daedbeb641baae5f.png][]

![9a4476bd4dc09f32725ed1870a31ffbb.png][]

选择package.json

是否保存这次的设置？n

![2f645bcace92cc71548e2cfe0a931ae1.png][]

创建成功后，控制台输入 npm run serve 即可运行。

*  打包命令：npm run build，生成dist文件打包给后台，项目路径中要采用相对路径
 *  安装 element-ui：cnpm install element-ui --save
 *  安装 axios：cnpm istall axios --save
 *  安装 vuex：cnpm i -S vuex@3.6.2 ，@后面可以指定版本号

[Node.js]: https://nodejs.org/zh-cn/
[235a29036b896ed90c3682f172e02efd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c70535a678cf44c495d86f42cfe583fb.png
[a7f3ffa4ad83839196fa63ca23bd2bc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/411283aaaec540deb07373df255231ea.png
[1d21f2773cbd9674ce037b21341d4f20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0fd3af9d302b4026b8abc0b100cea6f0.png
[912693c98187b3fff2cbbbd28a52d06a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ab941d154b864147ab6a2f794ded6eae.png
[241624874679bc9ce90760f3775ff9bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6818c5cca4184ef19c9c28d2107d4d40.png
[c864eb5639e485b99e96f2033eddb944.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/adab91a1e4a04f889607ba8d6a6b12f3.png
[88857d6627b3a1c9c5a82e26333ad071.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f6999bb0b45c4517aad71ce766e359c3.png
[9f34e34eea5009806f08024b1f87ca58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e670309bf4014474b3b6605c270e7264.png
[5d7ac2efffb2fd28daedbeb641baae5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6787979fab15443c9d252ceeb92e962e.png
[9a4476bd4dc09f32725ed1870a31ffbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/437ad393ab274bf39b0535c098d1fd0d.png
[2f645bcace92cc71548e2cfe0a931ae1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/7ede355e9ee446cd935d40f75af7c192.png