Vue advanced 1-2 – project construction (@ Vue / CLI)

Time：2022-5-24

Vue cli package name changed from Vue cli to @ Vue / cli

1、 Install nodejs

  1. clickhttps://nodejs.org/en/download/Download and install node.
  2. After successful installation, enter in the terminalnpm -v, the version information of NPM will be displayed.

2、 Install Taobao image

NPM is the package management tool of nodejs. In order to speed up the download speed, Taobao image can be installed. After the installation is successful, cnpm can replace NPM and input in the terminal

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、 Installing Vue cli 3

1. Vue cli 3 requires node > = 8.9
2. If you have globally installed the old version of Vue cli (1. X or 2. X), you need to uninstall it through NPM uninstall Vue cli – g or yarn global remove Vue cli.

Global installation @ Vue / cli, input at the terminal

npm install -g @vue/cli

Available after successful installationvue -VView version.

4、 Create Vue project

Create a project using scaffolding and vue3 give it a name

vue create vue3

As shown below, you will be prompted to select a preset.
Default: suitable for quickly creating a prototype of a new project
Manually select features: it is more needed for production oriented projects

Vue advanced 1-2 - project construction (@ Vue / CLI)

1. Select default

Vue advanced 1-2 - project construction (@ Vue / CLI)

2. Select manually select features to select and configure according to your own needs
Vue advanced 1-2 - project construction (@ Vue / CLI)

3. Configure project plug-ins and functions
Vue advanced 1-2 - project construction (@ Vue / CLI)

5、 Start project

  1. Enter the project directory:cd vue3
  2. Start project:npm run serve

Vue advanced 1-2 - project construction (@ Vue / CLI)

Note: Vue JS does not support ie version 8 and below.

6、 Project directory

Vue advanced 1-2 - project construction (@ Vue / CLI)

Vue cli 3 removes 2 X build, config and other directories, by creating Vue config. JS for configuration, please refer tohttps://cli.vuejs.org/zh/conf…

7、 Background management system practice

Simply write a background management system demo, and click the link for children’s shoes that need reference

Vue advanced 1-2 - project construction (@ Vue / CLI)

https://github.com/graycrr/vu…

Tags: , , , ,

Recommended Today

HTML webpack plugin package error

Package errorTypeError: Cannot read property ‘tap’ of undefined at HtmlWebpackPlugin.apply (D:\MyData\xiamy9\study\webpack-study\node_modules\html-webpack-plugin\index.js:40:31) at WebpackCLI.webpack (D:\MyData\xiamy9\study\webpack-study\node_modules\webpack\lib\webpack.js:51:13) at WebpackCLI.createCompiler (D:\MyData\xiamy9\study\webpack-study\node_modules\webpack-cli\lib\webpack-cli.js:1845:29) at async WebpackCLI.buildCommand (D:\MyData\xiamy9\study\webpack-study\node_modules\webpack-cli\lib\webpack-cli.js:1952:20) at async Command.<anonymous> (D:\MyData\xiamy9\study\webpack-study\node_modules\webpack-cli\lib\webpack-cli.js:742:25) at async Promise.all (index 1) at async Command.<anonymous> (D:\MyData\xiamy9\study\webpack-study\node_modules\webpack-cli\lib\webpack-cli.js:1289:13) It is found that there is a version problem: webpack 4 and html-webpack-plugin5 are used together. It is necessary to upgrade […]