首页 > 其他 > 详细

如何搭建Vue环境?

时间:2019-12-08 14:48:34      阅读:64      评论:0      收藏:0      [点我收藏+]

搭建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!

技术分享图片

 

 

 技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 运行任务:

技术分享图片

 

 

 感谢观看,批评指导

如何搭建Vue环境?

原文:https://www.cnblogs.com/strong514/p/12005228.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!