Vue-cli installation
Introduction
Vue-Cli is the scaffolding of Vue. After the installation is complete, you can quickly generate a runnable Vue development environment through commands, which can omit the tedious webpack configuration and the installation of various plug-ins, making it easy to quickly build an executable environment , To facilitate the initial construction of simple projects and learn Vue.
Note : The scaffolding version used here is relatively new, and the required Node.js version is also relatively high. If you don't want to uninstall the original Node.js version, the solution is described below.
installation steps
- If Node.js is not installed, you need to install Node.js first (https://nodejs.org/zh-cn/
select the current release version). If Node.js is already installed, execute node-in cmd. v View the currently installed version. We require the installation of Node.js
V8.9 or above, without uninstalling and reinstalling, just install two Node versions directly. The solution is as follows:
1.安装node.js管理工具nvm for windows
包地址为：https://github.com/coreybutler/nvm-windows/releases，选择nvm-setup.zip下载即可。
2.安装教程：https://www.cnblogs.com/gaozejie/p/10689742.html ，注意选择的安装路径最好不要有中文和空格。
3.安装完nvm后，可以通过以下几个命令来完成对node的版本切换：
nvm list //查看本地安装的所有版本
nvm install //安装相关版本的node.js
nvm use 11.12.0 //切换当前node版本到11.13.0
nvm uninstall 11.12.0 //卸载版本号为11.12.0的Node.js
- After installing Node.js, we generally manage related dependency packages through the npm that comes with Node.js, but the npm warehouse address is abroad, in order to facilitate the download of the package and install the Taobao mirror. Execute commands in cmd:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v //判断是否安装成功
- Execute the command to install Vue-cli
npm install -g @vue/cli
vue --version //检验安装是否成功
The test results of successful installation are as follows:
Rapid prototyping
It is suitable for rapid development of a single *.vue file. However, a global dependency needs to be installed.
cnpm install -g @vue/cli-service-global
After installation is complete, you can quickly create a .vue file, the default words main.js、index.js、App.vueor app.vueone. You can also specify the entry file explicitly, such as AAA.vue, and then start it and display it in the browser in the following way.
vue serve AAA.vue
Build a simple project
You can quickly create a simple project by executing the following commands, including generating the corresponding dependency configuration (Babel + ESLint). These default settings are very suitable for quickly creating a prototype of a new project.
vue create hello-world
At the same time, it also supports the use of ui interface to create a project.
vue ui