一.vue项目安装
1.安装node,npm
2.安装vue-cli脚手架
cnpm install vue-cli -g
或
npm install -g @vue/cli-init
3.初始化项目
vue init webpack .(.代表当前位置,name创建项目)
4.安装各种依赖
npm install
5.运行项目
npm run dev
自动打开浏览器
config→index.js→autoOpenBrowser:true;18行,端口下
二.引入jquery和boostrap
引入jquery
1.输入 npm install jquery --save-dev 用npm下载jq依赖、
2.找到build文件夹下的webpack.base.conf.js文件打开,修改配置:
(1)加入webpack对象:
const webpack=require('webpack');
(2)在module.exports里面加入:
plugins: [//(和module、resolve同级)
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
(3)在入口文件main.js中加入
import $ from 'jquery'
引入boostrap
1、修改webpack.base.conf.js文件:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
},
2、在入口文件main.js中加入:
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
3、在assets文件目录中拷贝bootstrap文件
4、可以测试是否引入成功
三.vue项目结构
build: 项目构建(webpack)相关代码
config: 配置目录,包括端口号等。可以使用默认的
node_modules:npm 加载的项目依赖模块
src:自己写的开发项目
static:静态资源目录,如图片、字体等
.babelrc:关于es6的一些配置
.editorconfig:编辑器的一些配置
.gitignore:git这个版本控制工具忽略的文件
.postcssrc.js:定义浏览器前缀
index.html:项目的入口
package.json:项目配置文件。
README.md:项目的说明文档,markdown 格式
*src源码目录
src/assets:放置一些图片,如logo等
src/components:存放开发的组件
src/router:路由的配置信息
src/app.vue:项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
src/main.js: 项目的核心文件
四.路由
1.创建组件
2.引入组件
import ... from ""//导入
3.注册组件
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children:[{
path:'world',
component:world
},{
path:'girl',
component:girl
}]
}]
})
5.export default//导出
6.new Vue{//new一个实例
el:'',//挂载点
router,//使用路由
components: { App },//使用的根组件
template: '
}
7.定义路由的跳转链接
8.路由激活后组建显示的位置
组件优化(懒加载)
export default new Router({
mode:"history",//去除地址中的#
routes: [
{path:"/",redirect:"/home"},//重新定向
{path: '/home',component:resolve=>{require(['@/components/Home'],resolve)},
children:[
{path:"/home",redirect:"/fg"},//重新定向
{path: '/world/:dd/:jk',component:resolve=>{require(['@/components/World'],resolve)}}
]
},
{path:'/index',component:resolve=>{require(['@/components/Index'],resolve)},
children:[
{path: '/route1',component:resolve=>{require(['@/components/route1'],resolve)}}
]
}
]
})
五.axios
1.安装axios
npm install --save axios
2.在入口main.js中导入axios 并将axios写入vue的原型,这样就能更简单的使用。
import axios from 'axios'
import Qs from 'qs'
//QS是axios库中带的,不需要我们再npm安装一个
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;
Ps:Qs这个库是帮助我们解决上面的那个坑的,建议使用...
3.在项目里愉快的使用axios啦
this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(res){
console.log(res.data)
//控制台打印请求成功时返回的数据
//bind(this)可以不用
}.bind(this))
.catch(function(err){
if(err.response) {
console.log(err.response)
//控制台打印错误返回的内容
}
//bind(this)可以不用
}.bind(this))