Article directory
1 Introduction
Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS and JavaScript, and provides a declarative, component-based programming model to help you develop user interfaces efficiently. Whether it’s a simple or complex interface, Vue can do it all.
1.1 Vue core functions
- Two core features of Vue:
- Declarative rendering: Vue extends a set of template syntax based on standard HTML, allowing us to declaratively describe the relationship between the final output HTML and JavaScript state.
- Responsiveness: Vue automatically tracks JavaScript state and updates the DOM responsively when it changes.
1.2 Vue API style
Vue components can be written in two different styles: optional API and composition API.
- Options API
Using the options API, we can use objects containing multiple options to describe the logic of the component, such as data, methods, and mounted.
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${
this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {
{
count }}</button>
</template>
- Composition API
Through the composition API, we can use imported API functions to describe component logic.
<script setup>
import {
ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${
count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {
{
count }}</button>
</template>
1.3 node environment
node -v
npm -v
In order to improve our efficiency, we can use Taobao's mirror: http://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm -v
2. Build the project
2.1 vue create
Vue CLI: The standard tool for Vue.js development
Vue CLI is the officially provided Vue toolchain based on Webpack, which is now in maintenance mode. We recommend starting new projects with Vite unless you rely on specific Webpack features. In most cases, Vite will provide a better development experience.
Install vue scaffolding:
//安装
//npm install -g @vue/cli //这个是从国外下载的比较慢
//cnpm install -g @vue/cli //这个是从镜像源下载
//升级
npm update -g @vue/cli
yarn global upgrade --latest @vue/cli
npm i -g @vue/cli
vue -V
vue create vue001
The automatically generated folders are as follows:
Continue to execute the command as follows:
cd vue001
pnpm run serve
//npm run serve
Browser access is as follows:
http://localhost:8080/
2.2 vue ui
Execute the following command:
vue ui
Browser access:
http://localhost:8000/project/select
Select the relevant settings in turn:
click the button "Create Project":
View the generated home page:
2.3 you enter
Vue CLI >= 3 uses the same vue commands as the old version, so Vue CLI 2 (vue-cli) is overwritten.
Installation library:
npm i -g @vue/cli-init
Use the following command to create a Vue project. The webpack parameter here is a template, and the project parameter is the project name (app-name).
# vue init [options] <template> <app-name>
vue init webpack vue003
Execute preview command:
cd vue003
npm run dev
Browser access is as follows:
http://localhost:8080
vue creat命令是vue-cli3.x提供创建Vue项目的方式，模板是固定的，模板选项可自由配置。
vue ui命令也是vue-cli3.x提供创建Vue项目的方式，可以通过操作可视化页面来创建和管理Vue项目。
vue init命令是vue-cli2.x提供创建Vue项目的方式，可以使用github上面的一些模板来初始化项目。比如webpack就是官方推荐的标准模板。
2.4 fast
Vite is a lightweight, extremely fast build tool that provides first priority support for Vue SFC.
Installation library:
//yarn create vite
//pnpm create vite
npm create vite@latest
Create project:
cd vue-project
npm install
npm run dev
Browser access is as follows:
http://localhost:5173/
Conclusion
如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)// ，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)! ! !