美文网首页
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