Vue环境搭建+构建第一个vue项目

落日映苍穹つ 2023-07-05 10:11 0阅读 0赞

1.  安装node  
    vue的运行是依赖于node环境，即npm包管理来实现。下载地址：  
    [https://nodejs.org/en/][https_nodejs.org_en]

2.查看node的安装版本号

*  打开cmd窗口（管理员模式），输入`node -v`,如下，安装成功。  
    ![在这里插入图片描述][20200213181326371.png]

1.  更改默认下载位置  
    在node的安装目录下新建node\_global和node\_cache两个文件夹，并在cmd窗口中执行:  
    这里node的安装目录：D:\\nodejs

npm config set prefix "D:\nodejs\node_global"
    
    npm config set cache "D:\nodejs\node_cache"

并在系统环境变量中配置：  
新建`NODE_PATH`值为：`node_modules`的路径.

1.  安装淘宝镜像  
    使用npm比较慢，所以安装淘宝镜像。用淘宝的cnpm来代替默认国外的npm管理工具。

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

1.  安装全局`vue-cli`脚手架

cnpm install --global vue-cli

使用cnpm要比npm快得多!  
安装完成之后输入 `vue`，查看是否安装成功！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ_size_16_color_FFFFFF_t_70]  
6. 完成上述工作，新建一个项目

vue init myfirst_vue

这是可能会出现错误，  
![在这里插入图片描述][20200214105201529.png]  
解决这个问题有如下几种方法：

*  设置所有代理为null（无效）

npm config set http-proxy null
    npm config set https-proxy null

*  使用本地webpack（亲测有效）[GitHub地址][GitHub]，然后创建即可：

vue init webpack地址 项目名称

安装完成之后，进入项目中,启动即可访问：

cd myfirst_vue
    npm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ_size_16_color_FFFFFF_t_70 1]  
浏览器中访问：`localhost:8080`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ_size_16_color_FFFFFF_t_70 2]  
至此，整个vue环境的搭建完成！

[https_nodejs.org_en]: https://nodejs.org/en/
[20200213181326371.png]: https://img-blog.csdnimg.cn/20200213181326371.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200213182630685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ==,size_16,color_FFFFFF,t_70
[20200214105201529.png]: https://img-blog.csdnimg.cn/20200214105201529.png
[GitHub]: https://github.com/vuejs-templates/webpack
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020021411020935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200214110303201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODMzOTAyNQ==,size_16,color_FFFFFF,t_70