Tips
(1)项目仪表盘在Vue-cli中,内置项目仪表盘 在本地文件中$vue ui打开(2)创建项目$yarn global add @vue/cli $ vue uivue-router
在SPA中,路由是组件之间的切换,路由模块的本质是建立组件与页面之间的映射关系.SPA的路由是只更新视图而不重新请求页面.根据mode参数不同可以选择Hash模式和History模式.Hash模式: 默认模式,通过锚点值的改变,根据不同的值,渲染指定的DOM位置不同的数据.原理是通过onhaschange事件,监听Hash值的变化. History模式: 路由配置规则,添加"mode:'history'"
//main.jsconst router = new VueRouter ({mode: 'history',routes:[....]}) 环境搭建
环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli项目创建:$vue create demo + $cd demo + $yarn serve + $vue ui Vue CLI 3 提供图形化界面,提供插件,Vue CLI有几个独立的部分组成:CLI是一个全局安装的npm包,提供终端的Vue命令.CLI服务是一个开发环境依赖,一个npm包,局部安装在每个@vue/cli创建的项目中,包含加载其他CLI插件的核心服务,一个优化过的内部webpack配置,项目内部的vu-cli-service命令,提供serve,build和Inspect命令. 项目结构├── node_modules # 项目依赖包目录 ├── public │ ├── favicon.ico # ico图标 │ └── index.html # 首页模板 ├── src │ ├── assets # 样式图片目录 │ ├── components # 组件目录 │ ├── views # 页面目录 │ ├── App.vue # 父组件 │ ├── main.js # 入口文件 │ ├── router.js # 路由配置文件 │ └── store.js # vuex状态管理文件 ├── .gitignore # git忽略文件 ├── .postcssrc.js # postcss配置文件 ├── babel.config.js # babel配置文件 ├── package.json # 包管理文件 └── yarn.lock # yarn依赖信息文件
- CLI插件是向你的Vue项目提供可选的功能的npm包.起步: $yarn global add@vue/cli $vue create vuecli $vue ui列表项目
- 快速原型开发,使用vue serve和vue build命令对单个*.vue文件进行快速原型开发,先$npm install -g @vue/cli-service-global目
- vue serve 命令可以在零配置下为.js或.vue文件启动一个服务器 $serve -o;打开浏览器 $serve -c; 将本地URL复制到剪切板 $serve -h;帮助 例子:$vue serve hello.vue
- vue build $build -t;构建目标 $build -n;库的名字 $build -d;输出目录 $build -h;输出用法信息 例子:$vue vue build hello.vue
插件和Preset
-
每个CLI插件都会包含一个(用于创建文件的)生成器和一个(用来调整webpack核心配置和注入命令的)运行时插件
$vue add @vue/eslint
-
Vue CLI Preset是一个包含新项目所需要预定义选项的插件的JSON对象,让用户无需在命令提示中选择它们.
vue-cli-service serve --open 在浏览器启动时打开浏览器vue-cli-service serve --copy 在浏览器启东时讲URL复制到剪切板vue-cli-service serve --mode 指定环境模式(默认值development)vue-cli-service serve --host 指定hostvue-cli-service build --mode 指定环境模式Vue Devtools
## Vue学习顺序 ##
- 扎实的HTML/CSS/JavaScript基本功.
- 跟随官方教程基础篇/进阶篇.
- NVM/Node.js/Vue-cli/Vue-Router/Vuex
Mock.js的使用
安装Mock.js $npm i Mockjs -s 在main.js的同级目录下创建一个Mock.js
const Mock = require('mockjs')Mock.mock('/register', function (options) { console.log(options) return Mock.mock({ 'number': '1' })}) 在main.js中引用: require('./mock')
Vue基础
Vue.js是一套构建用户界面的的渐进式框架,可以自定向上逐层应用.