Vue项目 --vue-cli脚手架起步！

搭建vue-cli脚手架：

官网文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

起步

全局安装:

 npm install -g @vue/cli-service-global

创建一个项目

vue create hello-world

注意： hello-world是安装目录如果安装在当前目录 vue create . 加上一个点

在终端输入以上代码后：

1。在当前目录中生成项目? 选择y

2.选择手动配置

3. 利用空格键进行选择。。。回车进行完成，进行下一步 本项目选择这四个

4.使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) 选择n

5

6. 生成配置文件

7. 把它作为未来项目的预置? 选择n

等待安装完成----------------------------------------------------//***

npm run serve  //启动项目

完成之后目录：

.

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

.

开始编写

多页面项目 ： 页面跳转地址修改
项目路由结构：

 {
    path: '/',
    redirect: "/index/movie/hotshowing"
  },
  {
    path: '/index',
    component: Index,
    children: [
      {
        path: "/index/movie",
        component: Movie,
        redirect: "/index/movie/hotshowing",
        children: [
          {
            path: "hotshowing",///index/movie/hotshowing
            component: Hotshowing
          },
          {
            path: "comingsoon",
            component: Comingsoon
          },

        ]
      }, {
        path: "/index/theater",
        component: Theater
      },
      {
        path: "/index/profile",
        component: Profile
      }
    ]
  },
  {
    path: '/city',
    name: 'city',
    component: City
  }

vue router 中的编程式导航：
知识点：
添加一个共享全局状态，点击事件会造成冒泡。@click.stop=“SET_SHOWNAV(!showNav)” 取消事件冒泡

iu浏览器适配
vw适配
：转换代码的工具
postcss-px-to-viewport 插件
编译的时候自动转成vw

yarn add postcss-px-to-viewport -D 

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
       viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false     // 允许在媒体查询中转换`px`
    }
  }
}

引用自 ： https://blog.csdn.net/Cookysurongbin/article/details/99671673

跨组件数据共享：

配置webpack
解决路径问题

模拟数据：插件axios易用、简洁且高效的http库

 npm install axios -s

http://www.axios-js.com/

ul框架
mint ui yarn add mint ui -D
Toast：结构{ } 提示

betterscroll
滑动效果 下拉刷新等
betterscroll
放在package.json下的dependencies內
“@better-scroll/core”: “^2.0.0-beta.6”,
“@better-scroll/pull-up”: “^2.0.0-beta.6”,
命令：yarn

多页面配置

vue.config.js:
https://cli.vuejs.org/zh/config/#pages

pages: { 
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  detail: {
    index: {
      // page 的入口
      entry: 'src/index/detail.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'detail.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'xiangqing Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'detail']
    },
  },

项目小知识点：

1. json-server 启动json本地数据接口

2. namespaced ：true 防止重名问题

3. scoped css样式作用域只在这个页面

4. 必须有一个唯一的根节点

5. postcss-px-to-viewport 插件 转换css代码的工具 (Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。)

6. vue钩子函数$nextTick(()this.$nextTick(()=>{
   Indicator.close();
   this.initScroll();
   })
   dom完成之后之后执行
   在数据修改之后，dom更新完之后执行这个函数，在这个钩子函数可以获取dom元素

7. refresh