> 下载及安装
1.1、node的安装及配置
使用vue.js开发web前端时,需要用到node的包管理工具npm,所以需要先安装node。
这里贴出node官网,下载完成后安装即可。
安装完成后,在命令行(CMD命令行)中打出node -v,如果显示node的版本号则安装成功。
node -v
接下来在命令行中打出npm -v ,检查npm是否正常安装,npm是node自带的包版本工具,正常情况node安装成功后npm也可以正常安装
npm -v
由于npm使用的是国外的镜像,大大影响我们的下载速度,所以一般把npm的下载镜像替换为淘宝镜像即cnpm,在命令行中粘贴如下命令,回车等待即可。
npm install -g cnpm --registry=https://registry.npm.taobao.org
同样,你可以在命令行中查看cnpm是否安装成功。如果一切正常的话,执行如下命令你可以看到一大堆的东西,包括node,npm,cnpm的版本号以及镜像地址等
cnpm -v
1.2、vue-cli的安装
为了方便开发大型的单页面工具,vue官方提供的vue-cli命令行工具,安装vue-cli的方法很简单,只需要在命令行中粘贴如下代码。注:install 是下载指令,-g是全局安装
cnpm install -g vue-cli
这个时候,基本的环境配置就已经完成了,你可以在命令行中输入vue看一下是否成功安装vue-cli。你应该可以看到vue-cli为我们提供的一些命令
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
help [cmd] display help for [cmd]
> 搭建一个vue应用
1.1、新建一个文件名为vue_app的应用
在命令行中输入如下命令并回车,按照他的提示回车或输入y(n)即可
D:\vue\demo>vue init webpack vue_app
> 除 Use ESLint to lint your code? (Y/n) 和 Setup unit tests with Karma + Mocha? (Y/n) 两项选择 n 以外,其他均选择 y 即可
完成以上操作后,你会在当前目录下发现一个vue_app的文件夹,从命令行进入这个文件夹,并输入如下命令,这个命令会将vue-cli搭建的项目默认的依赖包下载到本地。(注:请保证网络链接)
D:\vue\demo\vue_app>cnpm install
完成以上指令之后,一个项目就搭建好了,最后看一下项目的初始页面,在命令行中输入如下指令,启动项目
D:\vue\demo\vue_app>cnpm run dev
正常启动后在,会在浏览器中打开8080端口,如果看到如下页面,则项目启动成功
本文章来自我的老师所写,稍作改动