vue-cli3.x创建及运行项目

  1. Node 版本要求

    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

  2. 重新安装vue-cli,将是最新的vue-cli版本
    npm install -g @vue/cli
  3. 安装完后使用命令:
    vue --version

    查看安装的版本号,以及是否安装成功

  4. 创建项目:
    vue create hello-world
  5. 接下来,是在知乎上学习到的知识,引用知乎的图
  6. default: 默认配置,只有bable和eslint

    Manually select features: 手动配置
     

  7. Babel:将ES6编译成ES5

    TypeScript:JS超集,主要是类型检查

    Progressive Web App(PWA)Support:渐进式WEB应用支持

    Router:路由

    Vuex:状态管理

    Linter/ Formatter:代码检查工具

    CSS Pre-processors:css预编译 (稍后会对这里进行配置)

    Unit Testing:单元测试,开发过程中前端对代码进行自运行测试

    E2E Testing: 端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。

     

     

     

  8. 使用什么css预编译器:
  9. 代码检查工具:

    tslint: typescript格式验证工具(如果前面选择了TypeScript会有这一项)

    eslint w...: 只进行报错提醒;(如果还没熟悉eslint,推荐使用此模式)

    eslint + A...: 不严谨模式;

    eslint + S...: 正常模式

    eslint + P...: 严格模式;

  10. 代码检查方式:(我都选了)
  11. 所有的依赖目录的配置放置的位置(一般都是package.json)
  12. 在这里,项目的创建就算是完成了。
  13. 但是,vue-cli3与2的版本有很大区别,其中之前的build目录取消,也就没有了我们之前用的配置文件,那么我们需要在vue-cli3项目手动添加vue.config.js(在根目录下)
  14. 配置vue.config.js:
    // vue.config.js
    const path = require('path')
    const webpack = require('webpack')
    module.exports = {
      // baseUrl从vue cli 3.3起已经弃用了,用publicPath来代替
      publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 部署应用包时的基本URL(这里可以看一下官方说明)
      outputDir: 'dist', // 打包时生成的生产环境构建稳健的目录
      assetsDir: 'static', // 放置生成的静态资源的目录
      filenameHashing: true,
      lintOnSave: true, // eslint-loader会将lint错误输出为编译警告
      productionSourceMap: false, // 如果你不需要生产环境的source map,可以将其设置为false,以加速生产环境的构建
      configureWebpack: {
        // 简单/基础配置,比如引入一个新插件
        plugins: []
      },
      chainWebpack: config => {
        // 链式配置
      },
      css: {
        // css预设器配置项
        loaderOptions: {
          css: {
     
          },
          postcss: {
     
          }
        }
      },
      devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null,
        // proxy: {
        //     '/api': {
        //         target: '<url>',
        //         ws: true,
        //         changOrigin: true
        //     }
        // },
        before: app => {}
      },
      // 第三方插件配置
      pluginOptions: {}
    }
  15. 项目的目录的参考:
    ### 项目目录结构
    ├── public // 静态资源
    ├── src // 源代码
    │ ├── api // 所有请求
    │ ├── assets // 主题 字体等静态资源
    │ ├── components // 全局公用组件
    │ ├── models // 实体类
    │ ├── router // 路由及路由配置相关
    │ ├── store // 全局 store管理
    │ ├── utils // 全局公用方法
    │ ├── pages // view
    │ ├── App.vue // 入口页面
    │ ├── main.js // 入口 加载组件 初始化等
    ├── tests // jest测试
    ├── .eslintrc.js // eslint配置
    └── package.json
  16. Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
    npm install -g @vue/cli-init
    # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
    vue init webpack my-project
  17. 接下来就是运行项目了:
    cd hellow-world
    npm run serve

     

 

转载于:https://www.cnblogs.com/zhuzhu520/p/11445118.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值