How to use vue cli

Write in front:

What is vue? It is a progressive framework for building user interfaces (explanation on the official website). What is a progressive framework? The simple answer is that it is the least advocated. These concepts can only be seen and understood by oneself. A thousand readers and a thousand A Hamlet, but not too much explanation. The official Vue documentation is very comprehensive.

Use vue-cli to quickly create vue Project, vue-cli is very easy to use, but when initially setting up the environment to install vue-cli and related content, it is a headache for some people. I also ignored it when building the vue-cli project environment. I have encountered quite a lot of pitfalls, so I hereby write a tutorial on setting up the environment, and try to analyze each step in detail. Friends who need it can come and refer to it. If you like it, you can like it or follow me. I hope it can help everyone.

Advantages of vue-cli scaffolding:

• There is a mature vue project architecture design that can quickly initialize a Vue project.

• vue-cli is an officially supported scaffolding and will be iteratively updated with this version.

• vue-cli provides a set of local node test servers. You can start the server using the commands provided by vue-cli itself.

• Integrated packaging and online solution.

5. There are also some advantages, including: Modularization, translation, preprocessing, hot loading, static detection and automated testing, etc. You will find the power of vue-cli when you use it in depth.

This tutorial is based on windows system.

Now we officially start building the vue-cli scaffolding.

Command line tools

Command line tools are the basis for us to operate npm. This is a must-have. Many tutorials are not clearly written. Those tutorials have a lot of commands posted at the beginning. I didn’t know where to use the command line tools at the beginning. . .

git bash command line tool

1. Under Windows, I recommend using the git bash command line tool that comes with GitHub's desktop management tool. Just download and install it normally.

ps: Of course, if you want to use the built-in terminal cmd command line tool, you can, but after all, it is not as easy to use as git bash.

Install node.js

1. Just download and install node.js normally from the node.js Chinese official website. There is nothing special to pay attention to (foolish installation).

2. After downloading and installing node.js from the official website, npm (package management tool) already comes with it, and there is no need to install npm separately.

3. Please note that the downloaded node.js version must be above 4.0 to avoid using it if the version is too low.

4. Open the command line tool (any folder) and enter the command line node -v, npm -v, as shown below. If the corresponding version number appears, the installation is successful.

Install Taobao image

cnpm (Taobao mirror) related:

1. This is a complete npmjs.org mirror, which is used to synchronize modules on npm.

2. cnpm’s synchronization frequency is 10 minutes (newly released modules have lag, synchronization takes time, if you can’t wait, you can use npm).

3. The reason for installing cnpm: npm's server is foreign, so sometimes when we install "modules" it will be very, very, very, very, very, very slow.

4. The role of cnpm: Taobao mirror synchronizes the modules on npm to the domestic server, improving the time we install modules.

5. After installing the Taobao image, both cnpm and npm command lines can be used, and there is no conflict between the two

Installation method: Open the command line tool and enter the command line:

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

How to use cnpm:

$ cnpm install [name]

When installing the module, just replace npm with cnpm. Many domestic coders use cnpm. I personally recommend that everyone install it. Attached is the Taobao mirror URL,

Install webpack

安装方法：打开命令行工具，输入命令行：

npm install webpack -g

安装成功后输入webpack -v,如果出现相应的版本号，则说明安装成功。

安装vue-cli脚手架构建工具

安装方法：全局安装，随便一个文件夹，输入命令行：

npm install vue-cli -g

安装完成之后，输入命令行vue -V查看版本号，出现相应得到版本号即为成功：

通过vue-cli，初始化vue项目

通过以上几步，将我们安装脚手架所需要的环境和工具都准备好好了，下面就可以使用vue-cli来初始化项目。

新建一个vuetext（项目名）文件夹来放置项目，

在新建文件夹的上一级文件夹右键打开命令行工具，输入命令行：

vue init webpack vuetext1(项目名)

注：项目名不能大写，不能使用中文

解释一下这个命令，这个命令的意思是初始化一个vue项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中vuetext1是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

vue-cli初始化项目选项配置详细解析

$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令
 Target directory exists. Continue? (Y/n) y--------------------找到了vuetext1这个目录是否要继续
Target directory exists. Continue? Yes
Project name (vuetext1)---------------------项目的名称（默认是文件夹的名称），ps：项目的名称不能有大写，不能有中文，否则会报错
 Project name vuetext1
Project description (A Vue.js project)---------------------项目描述，可以自己写
 Project description A Vue.js project
 Author (OBKoro1)---------------------项目创建者
 Author OBKoro1 
 Vue build (Use arrow keys)--------------------选择打包方式，有两种方式（runtime和standalone），使用默认即可
 Vue build standalone
 Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装
 Install vue-router? Yes
 Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里个人建议选no，因为经常会各种代码报错，新手还是不安装好
 Use ESLint to lint your code? No
 Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
 Setup unit tests with Karma + Mocha? Yes
 Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
 Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd vuetext1)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目

Documentation can be found at https://vuejs-templates.github.io/webpack)--------------------vue-cli官方文档

现在vuetext1项目已经初步初始化完成了，里面也有一些文件，但是现在还不能成功运行。

3.如何运行项目

1. 进入你刚才创建在vuetext1项目的文件夹里面，在vuetext1项目的文件夹里面右键运行git bash 命令行工具。

2. 安装项目依赖。命令行： npm install。前面在项目初始化的时候，已经存在了package.json文件，直接使用npm install 安装项目所需要的依赖，否则项目不能正确运行。

创建完成的“vuetext1”目录如下：

创建完成的项目结构

到这里，我们已经成功使用vue-cli初始化了一个vue项目。

启动项目：

在vuetext1目录运行命令行npm run dev，启动服务，服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图。

vue-cli项目成功启动

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他vue项目运行的时候，可以使用ctrl+c来中断运行。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

readline怎样逐行读取并写入内容

Vuex的mutations与actions使用详解

The above is the detailed content of How to use vue cli. For more information, please follow other related articles on the PHP Chinese website!