vue2+webpack学习篇之创建项目
1、脚手架搭建项目
-
使用vue-cli脚手架搭建项目(需联网下载模板)
vue init webpack myproject
创建项目信息描述? Project name (myproject) //项目名称,直接回车 ? Project description (A Vue.js project) //描述信息 回车 ? Author (mayujuan <2205568144@qq.com>) //作者 回车 ? Vue build (Use arrow keys) //默认选第一个 回车 ? Install vue-router? (Y/n) //是否安装vue-router 回车 ? Use ESLint to lint your code? (Y/n) // 使用ESLint校验代码 n+回车 ? Set up unit tests (Y/n) //使用 unit tests n+回车 ? Setup e2e tests with Nightwatch? //n+回车 ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) // 选择是否使用npm下载依赖 启动verdaccio 回车
运行图片()
-
运行项目
cd myproject npm run dev
-
下载项目所需依赖
npm install -S babel-polyfill //兼容ie npm install -S element-ui // 下载element库 官方文档(https://element.eleme.cn/#/zh-CN/component/installation) npm install -S axios // 下载axios npm install -S vuex // scss环境 npm install node-sass // node-sass下载报错时修改下载源 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass npm install sass-loader@7.3.1 --save-dev npm install sass-resources-loader --save-dev
-
项目结构
myproject // 项目名称
build // webpack打包时配置文件
config // 配置文件
node_modules // 项目依赖
src // 项目主要代码
api // 接口地址文件
index.js // api入口文件
assets // 图片 css资源目录
css
img
components // 组件目录
global // 全局组件
pages // 具体项目文件
public // 公用文件
global.js // 全局变量及方法定义
install.js // 注册全局方法
request // 请求服务配置目录
index.js // http请求封装
router // 路由目录
App.vue // 页面
main.js // 入口文件
static // 项目中的静态文件 打包时不会被编译 -
main.js 引入共用文件
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import 'babel-polyfill' // 兼容ie import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios'; import qs from 'qs' import Vuex from 'Vuex' import ElementUI from 'element-ui' // element库 import template from './components/global/install.js' //全局组件 import 'element-ui/lib/theme-chalk/index.css' import './assets/css/index.css' //全局样式文件 Vue.use(Vuex) Vue.use(ElementUI) Vue.use(template) Vue.config.productionTip = false Vue.prototype.axios = axios; Vue.prototype.qs = qs; /* eslint-disable no-new */ const vue = new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) export default vue
-
App.vue
可不做修改,也可以做一些全局监听 -
pages目录
在src下新建pages文件 用来放页面文件 一般按照模块分类建文件夹
新建 home/list.vue home/add.vue
新建index.vue文件作为项目的框架文件(包含页面公用头部、管理系统的菜单栏、路由切换时显示位置) -
router目录 路由文件
index.js 配置页面路由文件import index from '@/pages/index' //引入文件 import homeList from '@/pages/home/list.vue' //引入文件 import homeAdd from '@/pages/home/add.vue' //引入文件 export default new Router({ routes: [ { path: '/', //默认展示页面 name: 'index', component: index, children: [ //用来切换的页面路由 { path: '/', //二级路由默认展示页面 name: 'homeList', component: homeList, }, { path: '/homeList', // 路由访问路径 name: 'homeList', // 路由名称 component: homeList, // 路由组件 }, { path: '/homeAdd', //路由访问路径 name: 'homeAdd', component: homeAdd, } ] } ] })
-
components目录
用来放定义的公用组件
新建index.js文件 //注册全局组件
global //全局组件目录
install.js // 注册全局组件
dialog.vue // 全局组件内容
install.js //// 一次引入终身受用 /** * require.context()参数的意义 * arg1.在哪里找 * arg2.是否要找子集 * arg3.以什么为规则来找 */ const requireComponent = require.context('./', true, /\.vue$/) const install = (Vue) => { // 如果组件被注册就返回,没有就注册 if (install.installed) return install.installed = true requireComponent.keys().forEach(filename => { // filename 文件 // 第i个组件 const config = requireComponent(filename) // 组件名 const componentName = config.default.name // 循环注册组件 Vue.component(componentName, config.default || config) }) } export default { install }
dialog.vue文件
<div class="comdialog"> <el-dialog> <div> <!-- 父组件中自定义标签 --> <slot></slot> </div> </el-dialog> </div> <script> export default { name: 'comDialog', //name为组件名称 props: { dialogList: Object }, data() { return { dataList: this.dialogList } }, } </script>