也可参考我之前的文章vue环境搭建
vue模块化开发
1,全局安装webpack(项目构建工具)(已安装可省略)
npm install webpack -g
2,全局安装vue脚手架。这个vue不同版本命令还不一样(已安装可省略)
npm install -g @vue/cli-init
3,使用webpack初始化vue项目
vue init webpack appname
4,启动vue项目
npm run dev
项目目录结构说明
build:项目打包工具(webpack)有关代码
config:配置信息,包括端口号等
node_modules:当前项目安装的所有依赖
src:我们编写代码的文件夹
static:存放静态资源的文件夹
.babelrc:语法转义的相关配置
index.html:首页相关内容
package.json:依赖包的信息
package-lock.json:依赖包的详细信息
项目是如何运行的?
index.html:项目主入口
src/main.js:项目主程序
el挂载index.html中指定的元素
router,简写形式,全写router: router,指定页面跳转路由
components:使用的组件,App是简写形式(属性名和属性值一样的情况可简写),全写{App:App}
template:元素最终渲染指定的模板
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<router-view/>是路由视图,main.js中指定import router from './router'路由是从router/index.js导入
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
routes是路由,规定访问路径path会使用component: HelloWorld的组件(多次测试发现name好像没什么用,以后发现有用的话再补充上),这个组件在import HelloWorld from '@/components/HelloWorld',@代表src的根目录
路由跳转
不能使用a标签,要使用
<router-link to=""></router-link>
to指定路由