vue-cli 是用于快速生成 vue 项目框架的一个工具
npm install vie-cli -g
手动命令行
vue init webpack test_vue
？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
？Author ---- 作者
？Vue build ---- 构建模式，一般默认第一个
？Install vue-router? ---- 是否安装vue-router
？Use ESLint to lint yout code? ---- 格式校验
？Set up unit tests ---- 测试相关
？Setup e2e tests with Nightwatch? ---- 测试相关
？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里选yes, use NPM, 之后自己在目标
目录下执行npm install即可。
启动命令
cd 项目目录 npm install npm run dev
webstorm
webstorm 创建则直接项目选择选择 vue 即可
启动项目
nde_modules 安装依赖
src 源码目录
package.json 项目配置文件
main.js 入口文件
用于ES6 语法重封装成通用的 ES5语法的打包工具
npm install webpack -g npm install webpack-cli -g
切换到项目目录中后命令 webpack 即可
可跟参数 --watch 保持跟踪改变会让进程保持监听
如果使用 vue-cli 版本较新, 将不会创建 build 文件夹
如果要配置webpack 在项目根目录下创建vue.config.js 在里面进行需要的配置
vue 官方发布的路由管理器主要功能有 官方链接
进入项目目录后
npm install vue-router --save-dev
安装完成后可以看到配置文件里面的 dev 环境下多了 vue-router
以及依赖文件夹下也有了相关的文件包
作为要被跳转展示的页面
<template> <div>我是内容页</div> </template> <script> export default { name: "Content" } </script> <style scoped> </style>
在 src 下创建 router 文件夹下创建 index.js
代码如下. 引入 VueRouter 新建实例并暴露
绑定相关组件作为路由的跳转内容
import Vue from ‘vue‘ import VueRouter from "vue-router"; import Content from "@/components/Content"; Vue.use(VueRouter) export default new VueRouter({ routes: [{ // 路由跳转路径 path : "/content", // 路由名称 name : "Content", // 路由跳转组件 component: Content }] })
在 main.js 里面的 Vue 实例中进行引用注册
import Vue from ‘vue‘ import App from ‘./App.vue‘ import VueRouter from ‘vue-router‘ import router from ‘./router‘ // 使用 Vue-Router Vue.use(VueRouter); Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount(‘#app‘)
App.vue 中, router-link 标签作为跳转使用, router-view 标签进行跳转后的页面渲染
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <router-link to="/content">Go to content</router-link> <router-view></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>
跳转前
跳转后
VUE 相关工具 vue-cli/webpack/vue-router
原文：https://www.cnblogs.com/shijieli/p/14862264.html