美文网首页
vue环境搭建以及vue-cli3简单使用

vue环境搭建以及vue-cli3简单使用

作者: 面向前端 | 来源:发表于2019-10-26 17:44 被阅读0次

首先要下载安装Nodejs:nodejs官网

安装结束可以打开cmd查看版本 ,如果是用idea或者vscode的terminal需要重启ide甚至重启才能用terminal调用node命令


node -v

npm -v

查看node版本表示安装成功

如果之前安装过旧的cli就需要先卸载


//查看vue cli版本

vue --version

//卸载

npm uninstall vue-cli-g

然后需要通过npm安装vue cli3


npm install -g @vue/cli

可能会因为网络问题出现下载失败的情况,就需要安装cnpm


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

cnpm install -g @vue/cli

//先切换到你需要放项目的路径,这里du是我的系统用户名,这里换成你们自己的或者别的路径

cd C:\Users\du

//安装完就可以通过cli创建项目,my-vue-project就是你的项目名

vue create my-vue-project


? Please pick a preset:

 > default (babel, eslint)

  Manually select features 

vue-cli会询问选择哪种配置,default是默认只有babel, eslint,第二个选项是自定义选择

如果选择第Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Babel 

( ) TypeScript

( ) Progressive Web App (PWA) Support

( ) Router

( ) Vuex

( ) CSS Pre-processors

(*) Linter / Formatter

( ) Unit Testing

( ) E2E Testing

就选择自己需要的就行,上下按钮切换,空格选择是否,enter确认,然后就等待拉取项目

拉取项目可能会因为网络原因失败,这时候需要设置 npm 源

1.npm cache clean --force //在上一步失败了的情况就需要清除npm的缓存

2.npm config set registry https://registry.npm.taobao.org

3.vue create my-vue-project

cli提示项目拉取成功

出现这个就是拉取成功,首先需要进入项目目录


//进入项目目录

cd my-vue-project

//本地启动项目

npm run serve 

//这时候在浏览器输入localhost:8080就能看到效果了

浏览器成功看到效果

相关文章

网友评论

      本文标题:vue环境搭建以及vue-cli3简单使用

      本文链接:https://www.haomeiwen.com/subject/kfluvctx.html