vue入门教程

Vue-cli入门教程

vue-cli是官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目

一、安装

1.首先安装node.js

首先我们需要安装node.js环境，可以直接到Node.js中文官网
安装完成后，可以用命令行工具输入 node -v 和 ** npm -v ** 查看版本号，如果出现版本号就说明安装成功

2.安装国内镜像

推荐使用国内镜像安装，所以我们先设置cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

ps:如果安装失败，可以使用npm cache clean 清理缓存，然后重新安装

同样使用cnpm-v查看是否安装成功，如果出现版本号则表示安装成功

3.安装webpack

npm install webpack -g

4.安装vue-cli

安装好了node和webpack,我们可以直接全局安装vue-cli；在命令行输入

npm install vue-cli -g

但是这种安装方式比较慢，

国内镜像安装vue-cli方法：

cnpm install -g vue-cli

使用Vue -V (注意V大写)查看是否安装成功如果出现版本号则表示安装成功

二、通过以上4步，我们需要准备的环境都已经准备好了,下面使用vue-cli创建项目

1、在硬盘找到放工程的文件夹，这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here

2、在cmd或者git中输入指令：

vue init webpack exprice

这里的 “exprice” 是项目名，可以自己定义ps：不能用中文

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev

3、cd进入创建的目录，例如我的：cd exprice(自己建立的工程名字)

4、安装项目依赖：

cnpm install

5、启动项目，

npm run dev

如果出现下面的指示，则安装成功，浏览器输入下面的端口回默认出现一个vue的欢迎页面

 I  Your application is running here: http://localhost:8080

三、创建完成的项目目录如下