Vue

2024年2月15日 171次阅读 来源: SoapEye

環境搭建

  • Win10下安裝NVM，利用NVM來管理Node.js的版本，切換淘寶源，安裝Node.js與NPM。

创建项目

  • 命令行操作： 先 $npm install -g @vue/cli 再 $ vue ui

vue-router
在SPA中,路由是组件之间的切换,路由模块的本质是建立组件与页面之间的映射关系.SPA的路由是只更新视图而不重新请求页面.根据mode参数不同可以选择Hash模式和History模式.

 Hash模式:
   默认模式,通过锚点值的改变,根据不同的值,渲染指定的DOM位置不同的数据.原理是通过onhaschange事件,监听Hash值的变化.
 History模式:
   路由配置规则,添加"mode:'history'"

//main.js
const 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 指定host
vue-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是一套构建用户界面的的渐进式框架,可以自定向上逐层应用.

VUe-CLI3.0的配置

在使用vue-cli3创建项目后，因为webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。

    原文作者：SoapEye
    原文地址: https://segmentfault.com/a/1190000018181817
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞