Use
npm install -g vue-cli
vue init webpack projectname
测试时 :
npm run dev
打包时 :
npm run build
vue-router
1、配置 Router
用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 cnpm 安装
cnpm i vue-router -D
2、在 router.js 中引入所需的组件,创建 routers 对象
import Vue from 'vue'
import Router from 'vue-router'
import StartPage from '@/components/StartPage'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'StartPage',
component: StartPage
},
{
path: '/index',
name: 'Index',
component: Index
}
]
})
3、路由使用
- 使用 映射路由
<router-link to="/index"></router-link>
- 编程式导航
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
Notice
1 . 加上scoped说明该css只在该组件中生效。
<style scoped>
...
<style>
2 . vue项目打包之后图片等其他资源路径错误
解决方法:找到项目中的config包中的index.js文件
assetsPublicPath: '/',
修改为
assetsPublicPath: './',
3 . vue项目控制台报出警告( 关闭ESlint 语法验证 )
解决方法:找到项目中的config包中的index.js文件
useEslint: true,
修改为
useEslint: false,
问题描述 :
✘ 13 problems (13 errors, 0 warnings)
Errors:
6 http://eslint.org/docs/rules/semi
2 http://eslint.org/docs/rules/no-multiple-empty-lines
2 http://eslint.org/docs/rules/space-infix-ops
1 http://eslint.org/docs/rules/no-trailing-spaces
1 http://eslint.org/docs/rules/quotes 1 http://eslint.org/docs/rules/camelcase
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.