vue installation
Version
Compatibility issues:
Vue does not support IE8 and below, because Vue uses ECMAScript 5 features that IE8 cannot emulate. But it supports all ECMAScript 5 compliant browsers.
About EMCA: https://zhuanlan.zhihu.com/p/367249029
Latest version: v 2.7.14
See https://github.com/vuejs/vue/releases for details
Development version and production version: https://gitee.com/wu-haoyi/tools/tree/master/Vue
The development environment version includes helpful command-line warnings
Production version optimized for size and speed
CDN usage (development version):
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
CDN usage (production version):
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
nodejs installation
1. Enter the official website to download
Official website address: Download | Node.js
View and download previous releases: Previous Releases | Node.js
2. Double-click the installation package to start the installation
① You can customize the path during the installation process
②You can choose the functions that need to be installed according to your needs (the default is enough):
Click on each item to view its description, such as npm package manager, that is, npm, which is the management system of node;
It can be seen that by default, npm is installed while node is installed.
Detailed meaning:
Node.js runtime : The running environment of node
corepack manager: Provides pnpm and yarn package managers
Reference: Node.js Corepack - Nuggets
npm package manager: Install the npm package manager
online documentation shortcuts: Documentation shortcut
Add to PATH: add to environment variable
Also click on the icon on the left to modify its installation behavior:
③Automatically install the necessary tools without checking:
④Click Install to install:
The installation is complete
3. Test whether the installation is successful
windows+R, open cmd:
Enter node -v: View node version
Input npm -v: check npm version
The normal display means that the installation is successful:
nodejs environment configuration
1. Modify the global download path
Create two folders under the installation directory: node_cacheand node_global:
node_global: where the global module is installed
node_cache: cache path
2. Modify the settings of prefix and cache
①Input:npm config set prefix "F:\coding\nodejs\node_global"
"F:\coding\nodejs\node_global" is the path of your newly created node_global
②Input:npm config set cache "F:\coding\nodejs\node_cache"
"F:\coding\nodejs\node_cache" is the path of your newly created node_cache
as follows:
If an error is reported, try to run with administrator privileges:
Steps: [Search] - Enter [cmd] - Select [Run as Administrator] (windows10 system)
After the modification is complete, you can npm config listview the configuration by:
It can be seen that the previous prefix has been overwritten by the user, and the location of the new cache and prefix is the same as we set
3. Environment variable configuration
Search for environment variables and open
① Find [Environment Variables] - [User Variables] - [Path]:
Modify the default path to a custom node_global path:
② Create a new [NODE_PATH] under [System Variables] and set the path as follows:
(The node_global path is initially empty, and the node_modules folder will be created automatically after setting the environment variable)
③ Find [System Variables] - [Path], add the global module download path:
4. Install mirror source
npm config set registry https://registry.npm.taobao.org
Install Taobao Mirror to download modules faster
Check whether the image is installed successfully:npm config get registry
nodejs use test
After configuring the environment variables, the packages we downloaded globally through npm should all be downloaded to the node_global folder. Next, test it:
install the express module:
npm install express -g
-g is for global installation
An error occurred:
The error message suggested that we try to try again with administrator privileges:
Open cmd with administrator privileges and the installation is successful;
The installed modules are found under the node_modules folder of node_global:
In order to do it once and for all, we can modify the user's operation permissions for the nodejs folder:
Find the [node_global] and [node_cache] folders under the installation path of [nodejs], right-click, and select [Properties] - [Security]:
Click [Edit]:
Check [Full Control];
When installing the module again, it can be installed normally without opening with administrator privileges:
vue-cli installation
npm install vue-cli:
vue-cli is an official CLI (command line tool) provided by Vue, which can quickly build complex scaffolding for single-page applications (SPA). It provides out-of-the-box build settings for modern front-end workflows. Get up and running in minutes with hot reload, lint checks on save, and production-ready builds
We can use vue-cli to quickly build a vue project
Installation instruction: npm install -g vue-cli
specify version installation: npm install -g [email protected](install vue2.9.6, which is also the latest version)
Uninstall:npm uninstall vue-cli -g
At first, I tried to install version 2.7.14, and found an error:
The error message shows that the corresponding version cannot be found
We can open the log information to see which versions are supported:
Copy the log path and open it in the file explorer,
You can see that we downloaded vue-cli from https://registry.npmmirror.com/vue-cli
The version expected to be downloaded is 2.7.14;
Visit this address:
You can see the version information as follows:
The latest version is 2.9.6
Since vue2 is about to stop maintenance, as a simple learning to use, just download the latest version
getting started with vue
Vue is a progressive framework for building user interfaces . Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up . Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications
Declarative rendering
At its core, Vue.js is a system that allows declarative rendering of data into the DOM using a concise template syntax
Bind data to DOM text
Simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue2.0 Test</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
{
{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>We mounted the Vue application on a DOM element, which is here#app
So we no longer interact directly with HTML, but control it through the Vue application;
Can be viewed in the console app.message:
You can also modify its value:
You can see that the page elements have changed dynamically, which is the so-called响应式
Bind data to DOM properties (v-bind)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将数据绑定到DOM属性</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
</body>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</html>The v-bind attribute is called a directive . Directives are prefixed with v- to indicate that they are special attributes provided by Vue
Directives apply special responsive behavior on the rendered DOM. Here, the directive means: "keep the title attribute of this element node consistent with the message property of the Vue instance"
Bind data to DOM structure (v-if v-else)
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})Handle user input
v-on event listener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v_on</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app-5">
<p>{
{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>v-model two-way binding
Implement two-way binding between form input and application state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v_model</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app-6">
<p>{
{ message }}</p>
<input v-model="message">
</div>
</body>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>Componentized application construction
The component system is another important concept of Vue, as it is an abstraction that allows us to build large applications out of small, independent and often reusable components
In Vue, a component is essentially a Vue instance with predefined options
How to register components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
</body>
<script>
//注册一个组件todo-item
Vue.component('todo-item', {
//通过props实现自定义attribute的功能，从而将数据从父作用域传到子组件
props: ['todo'],
template: '<li>{
{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</html>