1、首先更新npm到最新

npm i -g npm

2、安装 Vue CLI 3

npm install --global @vue/cli

3、创建一个新工程,并选择 “Manually select features (手动选择特性)” 选项。

vue create my-project-name

第一个是默认方式创建

Vue CLI v3.0.4
? Please pick a preset: (Use arrow keys)
  iii (vue-router, sass, babel, typescript) // 之前保存的
  default (babel, eslint) // 默认方式
❯ Manually select features // 手动选择

第二个是手工订制方式创建(选这里)

Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel //es6转成es5用
 ◉ TypeScript //js的语法超集
 ◯ Progressive Web App (PWA) Support //渐进式WEB应用
 ◉ Router //vue路由
 ◯ Vuex //专为 Vue.js 应用程序开发的状态管理模式
❯◉ CSS Pre-processors //css预处理
 ◉ Linter / Formatter //语法检查
 ◯ Unit Testing //单元测试
 ◯ E2E Testing //集成测试

上图按上下箭头移动、空格键选取所需安装的插件或功能,选上面几个就行,选完后Enter确认

Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index 
fallback in production) (Y/n)  //路由模式,输入y,后面可以改的

这里单元测试,插件选了jest

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files //保存到独立的js文件(个人偏向选这个)
  In package.json  //保存到package.json文件里

语法检查的方式,保存就检查,或者fix和commit时候检查(选默认的)

Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) // 选y保存,方便下次创建可以直接用

创建成功后进入目录npm run serve即可

4、 有需要可以安装vue的官方decorator装饰器插件

npm i vue-class-component vue-property-decorator --save

5、项目根目录下和package.json同级,新建可选的配置文件vue.config.js(3.0版本不用build和config文件夹了,webpack用这个配置文件就行,提供参考)

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.xxx.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.xxx.com/my-app/
  // then change this to '/my-app/'


  baseUrl: '/project/version/',

 // baseUrl: process.env.NODE_ENV === 'production' ? '/your/dir/' : '/'

  // where to output built files
  outputDir: 'dist',

  // where to put static assets (js/css/img/font/...)
  assetsDir: 'assets',

  // pages: vueConf.pages, // mutil entry
  // { mod1:
  //  { template: './src/modules/mod1/index.html',
  //    entry: './src/modules/mod1/main.ts',
  //    filename: 'mod1.html'
  //  }
  // }

  // for file cache
  filenameHashing: false,

  // whether to use eslint-loader for lint on save.
  // valid values: true | false | 'error'
  // when set to 'error', lint errors will cause compilation to fail.
  lintOnSave: true, // use check when save

  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  runtimeCompiler: false,

  // babel-loader skips `node_modules` deps by default.
  // explicitly transpile a dependency with this option.
  transpileDependencies: [/* string or regex */], // 默认babel-loader忽略mode_modules

  // generate sourceMap for production build? quickly debug when throws error
  productionSourceMap: false,

  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {}, // webpack链接API,for generate or modify webpack config
  configureWebpack: config => {
    console.log('process.env.NODE_ENV:' + process.env.NODE_ENV)
    if (process.env.NODE_ENV === 'developement') { //  production config
      config.devtool = 'cheap-module-eval-source-map'
    } else { // production config
    }
    // plugins: [
    //   new MyAwesomeWebpackPlugin()
    // ]
    // This relative module was not found: * ./router in ./src/main.ts
    // Object.assign(config, {
    //   resolve: {
    //     alias: {
    //       '@': path.resolve(__dirname, './src'),
    //       'vue$': 'vue/dist/vue.esm.js'
    //     }
    //   }
    // })
  },

  // CSS related options
  css: {
    // extract CSS in components into a single CSS file (only in production)
    // can also be an object of options to pass to extract-text-webpack-plugin
    extract: true, // 是否使用css分离插件 ExtractTextPlugin

    // Enable CSS modules for all css / pre-processor files.
    // This option does not affect *.vue files.
    // modules: false,

    // enable CSS source maps?
    sourceMap: false, // open CSS source maps

    // pass custom options to pre-processor loaders. e.g. to pass options to
    // sass-loader, use { sass: { ... } }
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      },
      stylus: {}
    },
    modules: false // open CSS modules for all css / pre-processor files suport 'foo.module.css'
  },

  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,

  // options for the PWA plugin.
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {}, // single page plugins config
  // configure webpack-dev-server behavior
  devServer: {
    open: process.platform === "darwin", // auto open browser
    host: "127.0.0.1", // or localhost
    port: 8888,
    https: false,
    hotOnly: false,
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changOrigin: true
      }, // set or proxy: null
      "/foo": {
        target: "<other_url>"
      }
    },
    before: app => {},
    compress: true
  },

  // options for 3rd party plugins
  pluginOptions: {
    // ...
  }
};

 

注:

参考

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

https://cn.vuejs.org/v2/guide/typescript.html

https://github.com/kaorun343/vue-property-decorator

分类: vuejs

0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注