原创

Vue开发之vue-cli3.x版本环境搭建

版权声明: 本文为博主原创文章,转载请注明原文出处!
本文链接:https://thinkingcao.blog.csdn.net/article/details/102826492

2019-10-30创建 :

目录

学习Vue是否需要学会Node.js?

一、Vue开发所需要的环境

1、安装node.js

2、安装npm包管理器

3、替换npm仓库为淘宝源

4、安装构建项目骨架的工具vue-cli

5、使用vue-cli创建vue-app项目:vue create vue-app

二、介绍一些概念

         1、vue-cli3.x

         2、npm与cnpm的区别​

三、环境搭建

一、安装node.js

二、安装npm包管理器

四、将npm远程仓库替换成国内淘宝源

五、安装vue脚手架vue-cli

六、创建项目vue-app(项目名)

七、命令


学习Vue是否需要学会Node.js?

     学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端,不需要学会Node.也不需要会Node,我们如果要使用Vue的脚手架的话,只需要学习Node所引声出来的npm指令即可;

一、Vue开发所需要的环境

 这是基于vue-cli3.x版本的环境搭建教程,跟vue-cli3.x之前的有些不一样

 1、安装node.js

  进入Node.js官网:https://nodejs.org/en/,选择下载并安装Node.js

 2、安装npm包管理器

   npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm,这里不用安装,输入npm -v可得到npm的版本

3、替换npm仓库为淘宝源

  npm远程仓库替换为淘宝的仓库(替换成淘宝源),这里跟Java中的Maven中央仓库就很像了;

  永久设置: npm config set registry https://registry.npm.taobao.org

4、安装构建项目骨架的工具vue-cli

  npm install -g @vue/cli

5、使用vue-cli创建vue-app项目:vue create vue-app

  vue create vue-app

二、介绍一些概念

1、vue-cli3.x

cli快速原型开发, 生成Vue项目脚手架

2、npm与cnpm的区别

三、环境搭建

一、安装node.js

对于不是专业的前端或者做后端的程序员来说,可能不是很懂node.js,也不清楚node.js是做什么用的,我也没有使用过,毕竟咱们不是专业的前端开发者对吧;这里说一下关于node.js的一些概念,其实nodejs是一个服务js平台,有npm,grunt、express等强大的代码与项目管理应用。还有webpack,v8等强大的功能,nodejs可以当作服务端语言没错,但是目前使用nodejs最多的场景是前端构建工具,比如webpack,gulp。。而vue的组件要编译势必要借助webpack,所以肯定要提供npm的安装方式,使用npm构建命令,而npm包管理器是集成在Node.js中了;

1、打开node.js官网https://nodejs.org/en/ ,windows下根据操作系统位数下载,一般是64位

2、直接双击安装即可,跟安装软件一样,这里不再累赘

3、命令行测试是否安装成功,输入命令:node -v    查看版本

二、安装npm包管理器

 1、 前面已经说了node.js中已经自带了npm包管理器,这里输入以下命令npm -g install npm,更新npm至最新版本

  npm -g install npm

 2、  查看npm包管理器版本号: 

  npm -v

四、将npm远程仓库替换成国内淘宝源

设置成淘宝源:npm config set registry https://registry.npm.taobao.org/

获取仓库地址:npm get registry (验证是否成功)

五、安装vue脚手架vue-cli

1、安装vue-cli:

npm install -g @vue/cli

2、测试是否成功,安装成功后可以用 vue -V 查看vue版本,注意是大写的V

vue -V

六、创建项目vue-app(项目名)

在创建的过程中,在Windows的命令行工具里使用:上下箭头是切换、空格键是确认选择该项,另外在Git命令行里是无法使用的;

1、输入命令:vue create vue-app

这里我们按住向下的箭头,点击空格键选择手动创建模式,初次接触这玩意可以随便折腾,无所谓,我这里选择大多数创建的方式:手动

2、初次搭建选择这几项即可,点击回车键

我这里选择是,如果随意搭建,可以选择否,选择是之后,下次创建项目时,会有这个骨架出现,

上述步骤完成后,按回车键下一步,这时候就开始创建项目了;完成项目骨架如下:

至此,基于vue-cli3.x的vue项目就搭建成功了

 

七、命令

1、vue打包编译命令:npm run build(打包编译后会生成dist文件夹,里面存放静态资源文件,有点类似于Maven编译后生成target目录)

2、vue运行项目命令:npm run serve, 然后访问: http://localhost:8080/# ,即可访问vue项目主界面欢迎页

vue-cli3.x与之前版本有些差别,具体可以查看:Vue入门环境搭建

 

 

文章最后发布于: 2019-10-30 21:38:38
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览