Blog.csdn.net/inthuixiang…

Cli.vuejs.org/zh/guide/in…

Install the vue – cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli
Copy the code

Check the version

vue --version
# or
vue -V
Copy the code

upgrade

To upgrade the global Vue CLI package, run:

NPM update -g@vue /cli # or YARN Global upgrade --latest @vue/cliCopy the code

Create a project

vue init webpack vue-demoName
Copy the code

Run the project

cnpm run dev
Copy the code

Note: If the browser does not load the page after opening, the local port 8080 May be used (default service is local port 8080), you can modify the port number in config>index.js configuration file

4. Follow-up steps – Package online

Your own project files need to be placed in the SRC folder

After the project is developed, you can type NPM Run Build to do the packaging

npm run build
Copy the code

After the package is complete, the dist folder will be generated. If you have changed the file path, you can directly open the local file to view it

When the project goes live, all you need to do is put the Dist folder on the server.

Attached: Part of the file function introduction (online pictures)

Rapid prototyping

Vue create creates the project

Cli.vuejs.org/zh/guide/cr…

Run the following command to create a new project:

vue create hello-world
Copy the code

You will be prompted to choose a preset. You can choose preset, which includes the basic Babel + ESLint setting, or choose “Manually selected Features” to recall the desired feature.

This default setting is great for quickly prototyping a new project, while manual Settings provide more options that are more desirable for production-oriented projects.

If you decide to manually select a feature, you can choose to save the preset option as a future reusable preset at the end of the action prompt. We’ll talk about Preset and plug-ins in the next section.

~/.vuerc

The saved preset file will be stored in a JSON file named.vuerc in the user’s home directory. Edit this file if you want to change preset/option that is saved.

During project creation, you will also be prompted to choose your preferred package manager or use the Taobao NPM image source

To install dependencies faster. These selections will also be stored in ~/.vuerc.

The vue create command has several options, which you can explore by running the following command:

Vue create --help usage: create [options] <app-name> create a new project option supported by 'vue-cli-service' : -p, --preset <presetName> ignores the prompt and uses the saved or remote preset option -d, --default ignores the prompt and uses the default preset option -i, --inlinePreset < JSON > Ignores the prompt and uses the inline JSON string preset option -m, --packageManager < Command > uses the specified NPM client -r when installing dependencies, --registry <url> use the specified NPM registry -g when installing dependencies, --git [message] force/skip git initialization, -n, --no -- git skips git initialization -f, --force overwrites any configuration that may exist in the target directory -c, --clone uses git clone to get the remote default option -x, --proxy creates the project using the specified proxy -b, --bare creates the project omitting the novice guidance information in the default component -h, --help prints the usage help informationCopy the code

Use a graphical interface

You can also create and manage projects with a graphical interface using vue UI commands:

vue ui
Copy the code

The above command opens a browser window and takes you through the project creation process with a graphical interface.