zoukankan      html  css  js  c++  java
  • 如何搭建Vue环境?

    搭建vue的开发环境:

        https://cn.vuejs.org/v2/guide/installation.html

    1、     必须要安装nodejs

    cnpm  下载包的速度更快一些。

        地址:http://npm.taobao.org/

        安装cnpm:

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

     

           接下来安装webpack……

           Cnpm install –global webpack

        2搭建vue的开发环境,安装vue的脚手架工具   官方命令行工具

        npm install --global vue-cli  / cnpm install --global vue-cli

    (以上命令只需要执行一次)

        3、创建项目   必须cd到对应的一个项目里面

            vue init webpack vue-demo01

            cd  vue-demo01

            npm install   /  cnpm install   

    如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

     

     如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

            npm run dev  大功告成!!!

        4、另一种创建项目的方式   推荐

                 少了许多语法检查的提示

            vue init webpack-simple vuedemo02

            cd  vuedemo02

            cnpm install   /  npm install       

            npm run dev

     

    老版本安装项目

     

     

     

     

     新版本安装项目

     

     

     附:安装与卸载老版本的webpack

    1.安装    在全局下安装:npm  install  webpack  -g            

                  安装指定版本:npm  install  webpack@<version>   -g       

     例如:npm install  webpack@3.4.1  -g

                  如果只是用来练习全局安装就可以了,一开始装了个4.8.3版本的,node也是最新的npm也好着,一做项目就出现错误

    4.*.*版本以上还需要安装另外一个东西,具体的可去webpack官网看。

                  最后只能把webpack删除,重新装了一个指定版本的,才没有什么问题了。

    2.删除     在全局下删除    npm  uninstall  webpack  -g

                  最好将项目目录下的node-modules一起删除,否则会有残留文件影响下一次的结果。

    查看node版本: node -v

    查看npm版本:npm -v

    查看cnpm版本:cnpm -v

    查看vue-cli版本:vue -V (大写)   vue --version

    查看webpack版本:webpack –v

     

    vue-cli2级到vue-cli3相关操作步骤

     1 卸载老版本的vue-cli

         Npm uninstall vue-cli –global

    2安装vue-cli3

    Npm install  @vue/cli  -g

    3.调用图形界面

     

         Vue  ui 击创建新项目,按照图形界面操作,本步操作so easy!

     

     

     

     

     

     运行任务:

     感谢观看,批评指导

  • 相关阅读:
    Nginx常用命令
    Nginx进程模型
    华为联运游戏或应用审核驳回:使用花币充值时,对支付延时处理不当,导致商品不到账
    使用Data Ability读取系统设置项
    100个HarmonyOS 2.0开发者Beta公测名额,限时认领!
    【有奖活动】HarmonyOS开发者创新大赛颁奖典礼丨见证星星之火燃爆盛夏
    你其实可以更快!用Toolkit拖拽式编码方法帮你快速提升开发效率
    真机调试设备不够?华为AGConnect云调试帮你忙
    华为后台某应用商品展示价格币种随其他应用配置而变化
    HMS Core.Sparkle影音娱乐创新沙龙邀您参加
  • 原文地址:https://www.cnblogs.com/strong514/p/12005228.html
Copyright © 2011-2022 走看看