2021-03-24 从零开始搭建vue移动端项目

从零开始搭建vue移动端项目

• 一、Vue项目搭建
• 二、使用步骤
  • 1.初始化
  • 2.路由
  • 3.Vuex（状态管理）
  • 4.Axios（数据请求模块）
  • 5.使用Less
  • 6.移动端适配
  • 7.注意事项
  • 8.移动端页面切换动画
  • 9.Ui框架
  • 10.打包
  • 11.其他

一、Vue是什么？

Vue 是一套用于构建用户界面的渐进式框架。

二、使用步骤

1.初始化

1）安装node.js

2）使用npm全局安装webpack npm install webpack -g

3）全局安装vue-cli npm install --global vue-cli

4）安装脚手架 npm install --g vue-cli

5）在目标文件夹目录创建项目 vue init webpack myproject(项目目录名称)

6）注意:

    (1)Install vue-router? Yes

    (2)Use ESLint to lint your code? Yes

    (3)Set Up Unit tests No

    (4)Setup e2e tests with Nightwatch? No

    (5)Yes,use NPM

7）搭建目录结构

    build                               webpack项目配置文件

    config                              项目配置目录，运行环境，端口之类的

    dist                                npm run build输出目录

    node_modules                        项目依赖包                    

    src                                 项目主要文件存放目录

        api                             请求模块

            common-api.js               定义公共请求

            home-api.js                 定义模块请求

        apiconfig                       请求封装

            index.js                    

        assets                          项目静态文件存放目录(会经过webpack处理,图片之类的静态资源)

        components                      公共组件

            tab