An overview of Vue project construction and packaging and running

This article brings you relevant knowledge about vue, mainly introducing issues related to project construction and packaging and operation. vue-cli: user-generated Vue project template, let’s take a look at it together I hope it helps everyone.

【Related recommendations: javascript video tutorial, vue.js tutorial】

一, Overview

Do we have to install node.js to use Vue.js? To be precise, nodejs is required when using vue-cli to build a project. You can also create a .html file and then introduce Vue in the following way. You can also use Vue.

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script></script>

But it is more convenient to use node. Package and deploy, parse vue single file components, parse each vue module, put them together, etc., start the test server localhost, and help you manage vue-router, vue-resource these plug-ins. So usually we will use Vue node method, which is convenient and saves trouble.

2. vue recommended development environment

Node.js: javascript running environment (runtime), different systems directly run various programming languages

npm: Package manager under Nodejs. Since using npm in China will be very slow, it is recommended to use Taobao NPM mirror (http://npm.taobao.org/)

webpack: Its main purpose is to publish all browser-side needs through CommonJS syntax. Make corresponding preparations for static resources, such as merging and packaging resources.

vue-cli: User-generated Vue project template

3. Node introduction and installation

1. What is npm :

When a website relies on more and more js code, programmers find it a very troublesome thing:
Go to jQuery official website to download jQuery
Go to BootStrap Download BootStrap from the official website
Go to the Underscore official website to download Underscore
…

Some programmers can’t stand it, so npm came out. The full name is the Node Package Manager package management tool.
This is very similar to maven and gradle, except that maven and gradle are used to manage java jar packages, while npm is used to manage js.

The implementation idea of ​​NPM is the same as maven and gradle:
1. There is a remote code warehouse (registry), which stores all js code that needs to be shared. Each js file has its own Uniquely identifies.
2. When the user wants to use a certain js, he only needs to quote the corresponding logo, and the js file will be automatically downloaded.

2. What is node

Node.js is a Javascript runtime environment (runtime environment), not a js file. It essentially encapsulates the Chrome V8 engine . Node.js is a development platform that allows JavaScript to run on the server side. It makes JavaScript a scripting language on par with server-side languages ​​such as PHP and Python.
[1]Node.js provides alternative APIs to make V8 run better in non-browser environments. The V8 engine executes Javascript very quickly and has very good performance.
[2]Node.js is a platform built on the Chrome JavaScript runtime, which is used to easily build web applications with fast response speed and easy expansion.

3. Development of npm and Node.js

The author of npm has completed the development of npm, so he sent an email to notify the authors of jQuery, Bootstrap, and Underscore, hoping that they would develop jquery , bootstrap, and underscore were placed in the npm remote warehouse, but no response was received, so the development of npm encountered a bottleneck.
The author of Node.js also completed the development of Node.js, but Node.js lacked a package manager, so he and the author of npm hit it off and stayed together, and finally Node.js had npm built-in.
As everyone knows what happened later, Node.js became popular. With the popularity of Node.js, everyone began to use npm to share JS code, so the jQuery author also published jQuery to npm. So now, you can use npm install jquery to download the jQuery code. Now using npm to share code has become standard for front-ends.

4. Node installation

Go to the official website to download: node official website: Node.js

If you want to download other versions, please click on other downloads to find it The corresponding version

It is recommended that novices take the next step without thinking, or you can choose to customize the installation

Use the administrator Open the dos command box

查看node版本

node -v

查看npm版本

npm -v

虽然npm是node自带的，但他未必是最新的版本，如果想要最新版本，可以执行npm install -g npm

使用淘宝NPM 镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

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

这样就可以使用cnpm 命令来安装模块了

5、安装vue-cli

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

查看vue-cli是否成功

vue list

四、新建vue项目

用管理员权限打开dos窗口，切换到需要创建项目的路劲下

vue init webpack frontend

npm install

运行项目
npm run dev

五、打包运行

npm run build

vue项目打包后只有三个文件，如下：

 这样就直接可以通过自己定义的路由访问啦！！！

到此结束了，不会的去学习去

【相关推荐：javascript视频教程、vue.js教程】

The above is the detailed content of An overview of Vue project construction and packaging and running. For more information, please follow other related articles on the PHP Chinese website!