什么是vue-cli :
官方提供的一个脚手架,用于快速创建一个vued的模板;
预先定义好目录结构及基础代码;使开发更加快捷
统一目录结构
本地调试
热部署
单元测试
集成打包上线。
一个新的电脑创建vue工程的步骤:
vue工程依赖node.js
第一步:安装node.js,官网下载无脑安装, 配置环境变量
安装 淘宝镜像(全局安装:npm install cnpm -g): 国内镜像快;
第二步: 安装vue-cli (cnpm install vue-cli -g ) 【有的全局安装在用户的appdata目录下,可以修改默认全局安装路径】
查看是否安装成功
查看可以基于那些模板创建vue应用程序 命令:vue list
第一个vue-cli应用程序:
1、建立一个存放项目的文件夹
2、创建一个基于webpack模板的vue应用程序
命令:vue init webpack 项目名(l例如:vue init webpack myvue)
一路都选择no即可;
项目名称 :Project name 默认回车即可
项目描述:Project description: 默认回车即可
初始化并运行:
cd 项目目录: (例如:cd myvue)
npm install (根据项目中的package.json文件中的依赖下载东西,相当于maven的pom.xml文件)
执行完之后项目中目录多了很多依赖(node_modules),如果执行过程有警告,错误,按照提示进行修复。
运行项目:npm run dev (启动时中有打包的过程,vue.js是基于ES6规范的,打包之后降级为ES5,因为目前大部分浏览器只支持ES5规范,提高了代码的兼容性)
通过访问地址进行访问
webpack
配置: 创建webpack.config.js 配置文件(一般使用vue-cli脚手架创建的项目都自动生成了这个文件)
配置的内容:
entry:入口文件:指定Webpack用那个文件作为项目的入口
output:输出,指定webPack 把处理完成的文件放置到指定路径。
module:模块,用于处理各种类型的文件
plugins 插件,用于热更新,代码重用等
resolve: 设置路径指向
watch: 监听, 用于设置文件改动后直接打包。
打包之后,如果想实现热部署,
可以运行指令:webpack --watch
Vue的组件安装使用:
vue-router 组件
安装 vue-router 插件
进入项目所在的包
执行:npm install vue-router --sava-dev
命令解释: --save-dev 保存包config包下的相关的dev文件。
怎么用?
安装路由,在src目录下,新建一个文件夹:router 专门存放路由,创建一个index.js主的路由配置文件
路由有两种模式:
一种是hash 路径带# ,默认的
一种是history: 路径不带#
可以在index.js中通过mode属性设置,值是字符串
例如:
export default new Router({
mode: 'history'
routes:[
]
})
编写index.js的内容:
第一步:
导入路由插件 import VueRouter from 'vue-router'
导入Vue import Vue form 'vue'
导入组件, import Content from ‘../components/Content ’
<--显示的使用,安装路由-->
Vue.use(VueRouter,router)
第二步骤:配置路由规则
export default new VueRouter({ //这里的VueRouter和上边导入的一致即可。
routes:[
{
path: '/content', //路由路径
name:'Content', // 路由名称
component:Content //跳转到组件,前提是需要导入这个组件
},
{
path: ''
name:''
component:'' //注意:这里是componet 没有s 否则路由失效。
}
]
})
第三步:
在main.js中配置路由:
//导入上边创建的路由配置目录,会定位到index.js路由配置文件
import router from ‘./router’
import Vue from 'vue'
import App from './APP'
new Vue({
el:‘#app’,
router, //配置路由
components:{
App,
}
template:'<App/>'
});
第四步:
在组件中使用:
例如在App.vue使用路由
<template>
<div id=“app”>
<router-link to="/main">首页</route-link>
<router-link to="/content">首页</route-link>
<router-view></router-view> //路由视图,配置这个的目的就是当点击路由之后,跳转到路径对应的组件的内容会在这里显示。
</div>
</template>
<script>
export default{
name: 'App'
}
</script>
路由传参,路由嵌套;
路由传参例子:
变化1 to属性需要绑定, to的值传递的是一个对象。规定对象里包含路径和 参数。语法如下:
<router-link :to="{name:'配置的组件路由路径',prams:{id:1}}">
变化2:
router的 index.js 中对应的路由,
{
path: "/路径/:id",
name: ‘组件名’
componnent:组件,
props: true,
}
变化3, 接收参数的组件的修改,修改后就可以在template便签中使用了。
<template>
<div>
<!--所有的属性不能直接在template这个跟节点下使用-->
<h1>{{id}}<h1>
<div>
</template>
export default{
props:['id','其他传递的参数'] , //修改的位置
}
路由定义重定向:
{
path: '/tohome'
redirect: '/main'
}
如有需要,可以在这个组件的export default{
}中添加一些钩子函数
例如:export default{
name: 'UserList',
beforeRouteEnter:(to,from, next)=>{
console.log("进入路由之前")
next();
},
beforeRouteLeave:(to,from, next)=>{
console.log("离开路由之前")
next();
}
}
路由钩子函数的参数说明:
to: 路由将要跳转的路径信息
from :路径跳转前的路径信息
next: 路径的控制参数
next():跳转下一个页面
next(‘/path’)改变路由的跳转方向,使其跳转到另外一个路由;
next(false) 返回原来的页面;
next((vm)={} )仅在beforeEnter中可用。Vm是组件的实例
如果需要创建一个新的组件配置路由,在路由router中的index.js中导入该组件,并配置一下它的路由规则就好了。 就可以在其他组件中用<router-link to='/该组件路径'>指向他就好了。 如果要显示,需要使用<router-view> 标签 //这个标签是用来显示路由对应的内容的。
在项目中引入其他组件,插件
进入项目的目录;
此处cmd
安装element-ui
npm i element-ui -s
如果还没有安装依赖,安装一下
npm install
安装 SASS加速器 【Css需要】
npm install sass-loader node-sass --save--dev
如果项目编码要用,在入口文件import导入该组件。并显示的使用它。
编写代码;
#启动测试
npm run dev
注意:如果npm安装失败了,就根据提示解决, 如果还是解决不了就用 cnpm安装,前提已经安装了国内的淘宝镜像。
npm命令解释:
npm install moduleName 安装到项目目录下
npm install -g moduleName: -g意思是将模块安装到
全局目录下,具体在磁盘的哪里要看 npm的安装目录配置文件怎么配置的。也有默认位置
npm install -save moduleName: --save 将模块安装到项目目录下,并在package文件的dependencies节点写入依赖, -S为该命令的缩写
npm install --save-dev moduleName --save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖, -D为该命令的缩写。
ps: 如果启动的时候sass相关的东西报错,就可能是因为sass的版本太高了,先通过命令卸载当前版本(npm uninstall sass-loader),在package.json 找到sass-loader 对应的版本,修改成更低的版本,然后重新 npm install, 运行 就好了 ,
其实在开始安装的时候也可以指定版本 npm install sass-loader@7.3.1 --save-dev
vue脚手架工程 的static文件夹下的静态资源外界浏览器可以直接访问到不用配置路由。
如果访问的资源路由没有配置,static文件夹下静态资源也没有,应该给前端响应一个404的提示。要实现这个功能,可以定义一个NotFound的组件, 然后在路由中配置这个组件的路由为
{
path : ' * '
componet: NotFound
}
意思就是如果访问的路径,在路由中没有配置或静态资源中也没有,则这个路由接管,跳转到NotFound 页面,提醒用户。
1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置)
2. 安装express-generator生成器
执行 $ npm install express-generator -g 进行安装
3. 创建一个express项目
执行 $ express expressDemo (expressDemo是项目名)
4. 进入expressDemo目录,安装项目依赖
$ cd expressDemo
$ npm install
5. 把dist目录下的所有文件复制到express项目的public文件夹下
然后运行 $ npm start 启动expressDemo
打开浏览器,输入 http://localhost:3000 , 就可以看到效果了(如果想改变端口 可以在./bin/www这个文件中修改)
另外一种有效的方法:
官方文档有简单的方法:npm install -g serve(全局安装) serve -s dist(运行打包后的文件)