1.项目环境搭建
安装node.js
官网下载nodejs
具体详细安装过程,大家不懂的可以百度一下,node.js自带npm包管理工具,使用npm可以使用安装项目中的组件,终端输入命令行,可以检查node版本
node --version
安装vue-cli 脚手架工具
npm install -g vue-cli
进行vue-cli全局安装
输入vue -v查看当前安装vue的版本号
vue -v
另外,由于npm的官方镜像服务器是在国外,国内没有进行科学上网的同学安装依赖包时,有时候速度会非常慢。因此,可采用淘宝的npm镜像,在命令行工具输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后就可以使用cnpm来代替npm了。因此,如果已经安装了淘宝的npm镜像工具,vue-cli可以这样安装:
cnpm install -g vue-cli
项目环境基本已经配置好了,下面开始搭建项目
2.项目的搭建
基于webpack模板搭建vue项目
命令行输入
vue init webpack my-project
其中my-project是项目名称,根据自己的项目定义就行,cd my-project 就是进入我的项目(my-project),按下回车,你会在终端中看到下面一大串:
- Project name:项目名称
- Project description:项目描述
- Author:作者
- Vue build:运行时与编译
- Install vue-router?:是否安装路由?
- Use ESLint to lint your code?:是否进行代码检测?
- Setup unit tests with Karma + Mocha?:是否进行单元测试?
- Setup e2e tests with Nightwatch?:是否进行端对端测试?
输入下面命令行,项目启动成功
my-project
npm run dev
出现上图,启动成功!完美!!