Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用,该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
准备条件
node.js客户端下载
下载地址:https://nodejs.org/zh-cn/
下载安装即可。
安装命令
# 安装全局vue-cli
npm install --global vue-cli# 创建一个基于webpack 模板的新项目
vue init webpack my-project# 安装依赖
cd my-project
npm install# 运行
npm run dev
默认端口为8080 直接在浏览器中访问 http://localhost:8080 即可出现页面,则安装成功
主要文件目录如下:--build
--config
--node_modules
--src(主要目录)
|--assets
|--components(一般作为页面防止目录)
|--router(如果按照router模块的话)
|--index.js
|--APP.vue
|--main.js
--index.html
【vue的cli用法】我们试着增加一个页面:
在router/index.js中参照helloWord增加一个Home路由。import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'// 增加的Vue.use(Router)export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},// 增加的home与上面import对应
{
path: '/home',// 访问路径 localhost:8080/home
name: 'Home',// 别名
component: Home// 与import取的名字对应
},// 匹配任何没有定义的路由,将其定义到根目录下面
{path:'*',redirect:'/'}
]
})
上面增加了一个路由,则需要在components目录下增加一个Home.vue 的页面
我是home
这就完成了一个vue页面的搭建,我们在浏览器中输入:
localhost:8080/home 就能访问components目录下面Home.vue 目录