Vue

接上篇文章

• 安装与新建

  # vue 3
  yarn global add @vue/cli
  # 升级
  yarn global upgrade --latest @vue/cli
  # vue 2
  yarn global add vue-cli
  # 卸载
  yarn global remove vue-cli
  vue -V
  # vue 3
  npm install -g @vue/cli
  vue create hello-vue
  # 升级
  npm update -g @vue/cli
  # vue 2
  npm install -g vue-cli
  vue init webpack firstApp
  # 卸载
  npm uninstall vue-cli -g
  

  Vue CLI v4.5.6
  ? Please pick a preset: Manually select features
  ? Check the features needed for your project: Choose Vue version, Babel, Router
  ? Choose a version of Vue.js that you want to start the project with 2.x
  ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
  ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
  ? Save this as a preset for future projects? No
  ? Pick the package manager to use when installing dependencies: Yarn
  $ cd hello-vue
  # 在 VSCode 添加一个批脚本 vue.bat
  $ yarn serve
  

• 目录描述

  • node_modules 依赖包
  • public 发布包
  • src/assets 资源
  • src/components 组件
  • src/router 路由
  • src/router/index.js 入口
  • src/views 视图
  • src/views/About.vue 页面组件
  • src/views/Home.vue 页面组件
  • App.vue 根视图
  • main.js 根脚本
  • babel.config.js babel 配置
  • package.json 项目描述文件
  • yarn.lock yarn工具依赖锁文件

• Vuex
  为vue设计的状态管理模式

• 其他命令

  # 重启 vscode  
  npm install -g @vue/router  
  # 安装 element ui 组件
  npm install element-ui -S
  

• Vue 日常小结

1. 对于编译要求太严格使用 useEslint 禁用:

  # bulid文件夹 -> webpack.base.conf.js 找到下面的代码并注释掉：
  //...(config.dev.useEslint ? [createLintingRule()] : []),

1. vue 项目通过 npm run build 打包以后页面没有内容?
   mode: ‘history’ 注释掉再次进行 npm run build

2. Cannot find modules ‘stylus’
   安装 stylus stylus-loader

3. 变量和字符串拼接

    data() {
      return {
        count: '1'
      }
    }
    <button @click='showMsg'></button>
    methods: {
      showMsg() {
        alert(`add ${count}`)
      }
    }
   

4. dispatch与commit区别
   dispatch 调用 actions(get 方法) / commit - mutations(set 方法)

https://cli.vuejs.org/zh/
http://www.javanx.cn/20200818/electron-vue-1/
https://blog.csdn.net/chuangyeifang163/article/details/108093682
https://github.com/SimulatedGREG/electron-vue
https://nklayman.github.io/vue-cli-plugin-electron-builder/
https://www.yuque.com/qdwds