Vue开发环境搭建
NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。我们搭建Vue的开发环境就必不可少的用到Node和NPM。
1 软件安装 1.1 下载Node.js下载地址:https://nodejs.org/en/
推荐下载LTS版本。
安装完成后,在控制台输入:
node -v看到版本信息
1.2 NPMNode自带了NPM,在控制台输入npm -v查看:
npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm
我们首先安装nrm,这里-g代表全局安装。可能需要一点儿时间
npm install nrm -g通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
我们通过nrm use taobao来指定要使用的镜像源:
nrm use taobao通过nrm test npm来测试速度:
nrm test npm注意:
有教程推荐大家使用cnpm命令,但是使用发现cnpm有时会有bug,不推荐。
安装完成请一定要重启下电脑!!!
安装完成请一定要重启下电脑!!!
安装完成请一定要重启下电脑!!!
2 创建工程(普通创建)创建一个新工程
然后新建一个module:
位置信息:
3 安装vue 3.1 下载安装下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。
3.2 使用CDN安装或者也可以直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者
<!-- 生产环境版本,优化了尺寸和速度 --> <script src="http://cdn.jsdelivr.net/npm/vue"></script> 3.3 推荐npm安装在idea的左下角,有个Terminal按钮,点击打开控制台:
进入hello-vue目录,先输入:npm init -y进行初始化
安装Vue,输入命令:npm install vue --save
然后就会在hello-vue目录发现一个node_modules目录,并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
4 vue-cli(vue-cli创建)在开发中,需要打包很多东西包括js、css、html。还有更多的东西要处理,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli
使用它能快速的构建一个web工程模板。
官网:https://github.com/vuejs/vue-cli
安装命令:npm install -g vue-cli
4.1 快速上手我们新建一个module: