Vue installation and project build

Vue 2

        Due to the slow installation speed of npm , you can use Taobao's image and its command cnpm . Install  cnpm  :

npm install -g cnpm --registry=https://registry.npmmirror.com

        In this way, you can use the cnpm command instead of the npm command to install the module.

# 安装 Vue 2 (最新稳定版)
cnpm install vue

        Vue provides an official command line tool vue-cli , which can be used to quickly build large single-page applications. The building process is as follows:

# 全局安装 vue-cli
cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
...开始配置项目

         After building the project, install and run:

cd my-project
cnpm install
cnpm run dev

        Visit http://localhost:8080 after successfully executing the above command .

        The Vue project is packaged using the following command:

cnpm run build

        After the execution is completed, a  dist  directory will be generated under the Vue project, which generally contains the index.html file and the static directory. The static directory contains the static files js , css and the image directory images .

Vue 3

        Due to the slow installation speed of npm , you can use Taobao's image and its command cnpm . Install  cnpm (ignore if already installed) :

npm install -g cnpm --registry=https://registry.npmmirror.com

View CLI

       Vue.js provides an official command-line tool that can be used to quickly build large single-page applications. For Vue 3 , you should use Vue CLI v4.5 available on npm as @vue/cli .

# vue 3 最新稳定版
cnpm install vue@next

# 全局安装 vue-cli
cnpm install -g @vue/cli

        Projects can be built in three ways: 

        1、will enter

        Create a new project based on the webpack template:

vue init webpack project-name

        2、vue create

        The syntax format of the vue create command to create a project is as follows:

vue create [options] project-name

        3, vue ui 

        In addition to using  the vue create  command to create projects, we can also use visual creation tools to create projects. 

vue ui

Fast

        Vite is a web development build tool that enables lightning-fast cold server startup due to its native ES module import method. By running the following command in the terminal, you can use Vite to quickly build a Vue project. The syntax is as follows:

npm init vite project-name

After building the project         through the above  Vue-CLI  or  Vite tools, install dependencies and run:

cd project-name
cnpm install
cnpm run dev

        To package a Vue project use the following command:

cnpm run build

View version number

        View the Vue  version number in the  Vue project :

npm list vue

        View vue-cli  version number:

vue -V
or
vue --version

        View the Vue and vue-cli  version numbers in the  Vue project ( the package.json  file is in the project root directory):

Upgrade  vue-cli

# 卸载旧版本 vue-cli (vue-cli 2)
npm uninstall -g vue-cli
# 安装新版本 vue-cli (vue-cli 3)
npm install -g @vue/cli