vue3.0 安装项目环境node.js 和 vue-cli配置详解

深碍√TFBOYSˉ_ 2021-09-09 10:30 680阅读 0赞

1.安装node.js 链接: [Node官网链接][Node].  
![长时间维护的版本][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]  
选择左边长时间维护的版本（比较稳定），右边是最新版，傻瓜式安装就行

开始-运行-cmd ：进入命令控制台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 1]  
在命令行工具里输入node -v（必须10.0以上的版本） 和 npm -v 查看是否已经安装完成 npm是node包管理器，安装node.js时候一起配套安装的.

node -v
    npm -v

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 2]接下来安装nrm，因为之后要通过npm安装很多的依赖包，国内直接使用的话，镜像源会比较慢，下载时候可能会卡顿

npm install nrm -g
    //上面如果不可以或者直接使用淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    //查看国内镜像源
    nrm ls
    //恢复原来的（取消镜像
    npm config set registry https://registry.npmjs.org

\------------------------------------------------npm安装结束----------------------

安装vue-cli  
首先清理环境，卸载之前的旧版本，如果不确定之前有没有安装过的可以用一下  
卸载：

npm uninstall vue-cli -g
    // (没用过yarn不执行
    yarn global remove vue-cli

安装：

npm install -g @vue/cli
    //如果报错可以试一下：
    cnpm install -g @vue/cli 
    //或者切换网络

出现版本号表示安装完成了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 3]  
事后查看自己的vue-cli 版本号

Vue -V

安装指定版本的vue-cli

npm install @vue/cli@4.5.9（举例）

使用脚手架工具创建项目  
首先到桌面上  
![在这图片描述][fdec67f1fa4643ebacc7ed9f2f6b4d54.png]  
创建vue-cli项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 4]  
自定义脚手架内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 5]  
选择vue版本，我选择的3.0  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 6]  
如何使用ESLint 我选择默认第一个，出错会给一些警告  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 7]  
Lint校验，选第一个回车  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 8]  
是放单独的文件，还是json里,我们选择单独文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 9]  
创建过程是否保存，下次使用，我们不需要保存，输入N，需要的输入Y  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 10]  
正在创建项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 11]  
创建完成：使用 cd demo 进入项目  
然后 npm run serve 跑起来项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 12]  
创建完成啦  
一般来说端口号是8080，我的被占用了，所以是8081  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 13]  
浏览器输入 http://localhost:8081/  
出现下面的界面说明本次搞定啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 14]  
以上内容根据dell老师视频整理链接: [Vue3 系统入门与项目实战][Vue3].  
本文仅供我自己参考，不做其他用途，禁止转载。

[Node]: https://www.nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/c62deb6edb894778b87a93407141f81a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 1]: /images/20210827/b8eded0ffa204a96b606a4b8c157cab3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 2]: /images/20210827/3aff1e55a30b4f619d723a6a112f752a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 3]: /images/20210827/de3ac1368f4042ca9da275bfc1ee6558.png
[fdec67f1fa4643ebacc7ed9f2f6b4d54.png]: /images/20210827/172241347c2448eb989dbd557f23f86e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 4]: /images/20210827/7f96fa40307e45d79b2662af16c52da7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 5]: /images/20210827/bb03bceb6c78405f88fa6ae8028d103c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 6]: /images/20210827/118175ee26f44160b26d781abdd2dc42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 7]: /images/20210827/179bbdded4724faa920c63439d9eaa6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 8]: /images/20210827/4887705b672e474d898b7c706ae86ef0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 9]: /images/20210827/458d85f5c4ef4b30866c4c7f5ddce3a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 10]: /images/20210827/e7ab759cdceb49b0b57828072991c5de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 11]: /images/20210827/e8d818026f7d4159b3573f65a58b4093.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 12]: /images/20210827/9bd31c5182cc44aebff10ab7dbcfac96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 13]: /images/20210827/2443a423bf0b4f839348e6bfbf6bfa2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70 14]: /images/20210827/235a171202604b6fbb9983c1f4ef1b86.png
[Vue3]: https://coding.imooc.com/class/472.html