3.vue-cli3创建项目

vue创建新项目

vue create vue-goodnotes

1. 默认模式或者手动配置，这里选择手动配置

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features  

2. 要安装的模块：Babel, Router, Vuex, Linter

? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 

3. 选择路由模式。history模式还是hash模式，这里选择默认的hash模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

4. 选择ESLint模式。这里选择默认的Standard模式

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

5. 选择样式的检查在什么时候。这里选择默认，保存的时候

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

6. 配置是写在单独的文件还是全部卸载package.json中，这里选择吧第一个，单独文件，便于维护

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json 

7. 现在写的这些配置是否适用于未来项目的创建。这里选择默认不同意

? Save this as a preset for future projects? (y/N) n

8. 等待安装，安装完成后有进一步提示，按照执行

 $ cd vue-book-imooc
 $ npm run serve

成功运行

 DONE  Compiled successfully in 3254ms                                                                                           12:36:47


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.28:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

打开地址

默认项目界面

vue项目打包

1. 根目录创建vue.config.js，在其内指定根路径

module.exports = {
  // baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath
  // baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

运行npm run build生成dist文件夹

项目打包