Vue CLI Installation and use

1.1 installation

  • Global installation, can be passed at any timevueCommand to create the project
npm install @vue/cli -g
Copy the code

1.2 upgrade

  • If an earlier version is used, run this command to upgrade it
npm update @vue/cli -g
Copy the code

1.3 create

Vue Create project nameCopy the code

1.4 configuration

  • Whitespace controls whether to select or not
Choose Vue version Specifies whether to select the Vue version. The current default version is vue2. Babel Specifies whether to select Babel. Es6 Conversion ES5) TypeScript Whether to use TypeScript Progressive Web App (PWA) Support project whether to Support PWA Router Whether Router routing is added by default Vuex is added by default Vuex State management CSS Pre-processors Whether CSS pre-processors are used Linter/Formatter whether ESLint is used to format code Unit Testing Whether to add Unit Testing E2E Testing Whether to add an E2E testCopy the code
  • choosevueversion
2.x
3.x
Copy the code
  • Configure the location for storing information files
> In dedicated config files to save package.json to save package.jsonCopy the code

2. Vite

Official position: next generation front-end development and build tools

As your project gets bigger, the amount of JavaScript you need to process grows exponentially, with more modules; The build tool takes a long time to start the server, and the HMR takes a few seconds to show up in the browser; Vite is a new front-end build tool that dramatically improves the front-end development experience

It mainly consists of two parts

  • A development server, which provides rich built-in functionality based on native ES modules, HMR is very fast;
  • A set of build instructions that use rollup to open our code and that are pre-configured to output optimized static resources for the build environment;

2.1 installation

Vite requires Node versions older than 12 ==

NPM install vite -- g # install vite -- D # installCopy the code

2.2 the use of

  • Start the
npx vite
Copy the code
  • css
The CSS is supported by default and no additional configuration is requiredCopy the code
  • less
npm install less -D
Copy the code
  • vue
Vue 3 Single file components: @vitejs/plugin-vue Vue 3 JSX: @vitejs/plugin-vue- JSX Vue 2 Underfin /vite-plugin-vue2Copy the code
  • Install vUe-enabled plug-ins
npm install @vitejs/plugin-vue -D
Copy the code
  • Vite.config.js configuration plug-in
import vue from '@vitejs/plugin-vue'

module.exports = {
  plugins: [
    vue()
  ]
}
Copy the code

2.3 packaging

npx vite build
Copy the code

2.4 Enable local services to preview the package effect

npx vite preview
Copy the code

2.5 the scaffold

  • The installation
npm install @vitejs/create-app -g
Copy the code
  • use
create-app
Copy the code