Node下载创建vue项目

最新推荐文章于 2023-07-04 01:15:21 发布

wingacd

最新推荐文章于 2023-07-04 01:15:21 发布

阅读量103

点赞数

文章标签： nodejs

本文链接：https://blog.csdn.net/wingacd/article/details/116492440

版权

1下载

在这里插入图片描述
一直next

2、创建vue项目

一，安装node环境
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210507142741418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbmdhY2Q=,size_16,color_FFFFFF,t_70

可以使用淘宝镜像提高效率：http://npm.taobao.org/

//查看源
npm config get registry
//更换源
npm config set registry https://registry.npmjs.org
//淘宝源
npm config set registry https://registry.npm.taobao.org

输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

二、搭建vue项目环境
1、全局安装vue-vli
npm install --g vue-cli（只需要继续一次）
2、进入项目目录，创建一个基于webpack模板的新项目: vue init webpack 项目名
（1）新建一个文件夹
在这里插入图片描述
（2）cmd内打开

（3）进入项目目录，创建一个基于webpack模板的新项目: vue init webpack 项目名

（4） npm run dev 运行

进入他给你的网站确定是否创建成功

在Visual Studio Code 下载
vetur
eslint
Path Intellisense
View In Browser
Live Server
Debugger for Chrome
HTML CSS Support
JavaScript Snippet Pack
HTML Snippets
插件

在这里插入图片描述

// 引入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入axios
import axios from 'axios'


```css
在cmd 进行创建映=引入内容，否者就不会出现下面错误
npm i element-ui -S

npm install axios --save

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210507155513978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbmdhY2Q=,size_16,color_FFFFFF,t_70)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210507155827755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbmdhY2Q=,size_16,color_FFFFFF,t_70)
最后效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210507155859327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbmdhY2Q=,size_16,color_FFFFFF,t_70)