前端_JavaScript_Vue-优快云博客

本文详细介绍Vue.js项目从创建到开发的全过程，包括环境搭建、项目结构解析、Vue-router和Vuex的使用，以及如何利用Vue CLI进行快速原型开发。同时，介绍了Mock.js在项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Tips
(1)项目仪表盘
在Vue-cli中,内置项目仪表盘在本地文件中$vue ui打开
(2)创建项目
$yarn global add @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是一套构建用户界面的的渐进式框架,可以自定向上逐层应用.