vue项目建设详细步骤
一.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: '<App/>'
}
7.定义路由的跳转链接
<router-link active-class="类名" tag="显示标签" to="跳转位置"></router-link>
8.路由激活后组建显示的位置
<router-view></router-view>
组件优化（懒加载）
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))
