Vue – cli scaffold

Vue-cli single file component

  • The installation
NPM install -g@vue /cli Enter vue -v if the command cannot be executed, you need to configure the global command my computer - right-click - Properties - Advanced System Settings - Environment variables - System variables -Path- Add the global node_modules/vue absolute Path to the Path example: NPM root -g // C:\Users\admin\AppData\Roaming\ NPM \node_modules Add variable: C:\Users\admin\AppData\Roaming\ NPMCopy the code
  • Create a project
Vue create vue- CLI -demo1 // create Project name Select default Installation default dependency select Manually select features User-defined configuration Select configuration items Press the space bar to select all a and all I. TypeScript // Language extension to add features to JS Processive Web App (PWA) Support // Progressive Web application Router // Vue - Router routing Vuex // State management CSS pre-processors // Sass/Less Linter/Formatter // support code style checking and formatting Unit Testing // support Unit Testing E2E Yes CSS preprocessor: Sass/ WITH Dart-sASS (SCSS) Select ESLint configuration item: ESLint+Prettier Syntax Detection method: Lint on save Configuration files stored in: In package.json // Save the configuration items to package.json Whether to save the previous configuration record generation file: / / save the record before you create the project configuration options when the c1 is Yes/address/log file in C: / Users/Administrator /. Vuerc command: NPM run serve / / start the project The default address: http://localhost:8080/ // In package.json: "serve": "vue-cli-service serve", NPM run build2 // Package project "build2" in production mode: "Vue-cli-service build --mode development" NPM run build "Vue-cli-service build", NPM run lint // format code "lint": "Vue-cli-service lint" NPM run inspect // inspect webpack.config.js configuration code "inspect":"vue-cli-service inspect" NPM install pubsub-js --save // Pubsub sibling component communication NPM install axios --save // axios send Ajax NPM install jquery --save // jquery npm install view-design --save // iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css';Copy the code

Vue-cli project directory resolution

  • Vue-cli project directory resolution
SRC: development directory Assets: static file directory, which will be renamed during packaging./ / For example, in app.vue, <img SRC ="./assets/logo.png"> components: Router /router.js: route configuration file mode: "history", // historical route, can delete base: Process.env.base_url, // Base path, default is/app.vue: root component main.js: The error log is more detailed when the core entry file // vue.config. productionTip = false, ProductionTip = process.env.node_env === 'production'; Browserslistrc: the range of compatible browsers corresponding to the browserslist option of package.json. Eslintrc.js: esLint-related configuration.gitignore: DS_Store // unuploaded directory node_modules babel.config.js: the configuration of Babel, that is, the compilation configuration of ES6 syntax package-lock.json: Lock the version of dependent packages package.json: basic project information postcss.config.js: CSS compilation toolCopy the code

Customize global CLI configuration

  • Customizing global Vue CLI configuration (see cli.vuejs.org/zh/config)
Create vue.config.js file: Const name = defaultSettings. Title | | 'freight management background / / page title. The module exports = {publicPath:'/', / / public path, '/demo' devServer:{// Development environment configuration, Port :8080, // hot deployment port number host:'localhost', // host name, 127.0.0.1, real: 0.0.0.0 HTTPS :false, // HTTPS protocol open:true, // Automatically open the browser when starting the service proxy: {... } // Proxy server configuration}} configureWebpack:{name: name, alias: {'@': resolve(' SRC ') // Resolve (__dirname, 'SRC ')}} lintOnSave:false, // false to disable lint format error outputDir:"dist", / / relative to outputDir indexPath static resource output path: "index.html", / / relative to the outputDir index. The HTML output path productionSourceMap: false, FilenameHashing :false/Package file names do not generate hash values. Generally, do not configure this parameterCopy the code