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

深藏阁楼爱情的钟 2023-07-23 10:56 30阅读 0赞

# 搭建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  
![在这里插入图片描述][20200407193428839.png]  
2.选择手动配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]  
3. 利用空格键进行选择。。。回车进行完成，进行下一步 本项目选择这四个  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]  
4.使用历史模式的路由器?(需要为生产环境中的索引回退进行适当的服务器设置) 选择n  
![在这里插入图片描述][20200407194137536.png]  
5  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]  
6. 生成配置文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 3]  
7. 把它作为未来项目的预置? 选择n  
![在这里插入图片描述][20200407194433959.png]

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

npm run serve  //启动项目

完成之后目录：  
![在这里插入图片描述][20200407194818962.png]

|-- 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钩子函数 n e x t T i c k ( ( ) t h i s . nextTick(() this. nextTick(()this.nextTick(()=>\{  
    Indicator.close();  
    this.initScroll();  
    \})  
    dom完成之后之后执行  
    在数据修改之后，dom更新完之后执行这个函数，在这个钩子函数可以获取dom元素
7.  refresh

[20200407193428839.png]: /images/20230528/6f6f720c37fe495f83b1bcc57dee7f14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: /images/20230528/e83970f0a97f4c48bb0b1d93e9ce3641.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]: /images/20230528/f4ae0845cae944ab8c4bad7a8431e5a1.png
[20200407194137536.png]: /images/20230528/2aea1336eef1463e995116eca147f6e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]: /images/20230528/bedf83d23aee46fdb06d073b69f0432a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 3]: /images/20230528/31842cf9b12c4d19b28d286ee7174969.png
[20200407194433959.png]: /images/20230528/711bf6c049394cfa89b591b52997a928.png
[20200407194818962.png]: /images/20230528/c0723bbe647340eea70d0062c5f071c2.png