Javascript

Vue3学习入门：从零开始搭建第一个Vue3项目

本文主要是介绍Vue3学习入门：从零开始搭建第一个Vue3项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
概述

本文提供了详细的指导，帮助你从零开始学习和搭建Vue3项目，涵盖环境搭建、基本语法、组件化开发、路由管理、状态管理和项目优化与部署等内容。文章旨在帮助你掌握Vue3的核心概念和最佳实践，顺利入门Vue3学习。

Vue3简介与环境搭建

什么是Vue3

Vue.js 是一个渐进式JavaScript框架，Vue3是其最新版本，提供了更高效的渲染性能、更简洁的API以及更好的开发者体验。与Vue2相比，Vue3在性能、API设计和TypeScript支持方面都有了显著的改进。Vue3使用了新的虚拟DOM算法（Patch算法），重构了响应式系统，并改进了组件化系统，使得开发者能够更轻松地构建大型应用。

安装Node.js与Vue CLI

在开始使用Vue3之前，你需要确保你的开发环境已经安装了Node.js和Vue CLI。Node.js是一个用于构建服务器端和客户端应用的JavaScript运行时环境，Vue CLI则是Vue.js的命令行工具，用于快速搭建Vue项目。

  1. 安装Node.js：

    • 访问Node.js官方网站（https://nodejs.org/），下载并安装最新版本的Node.js。
    • 安装完成后，你可以通过命令行检查Node.js是否安装成功： 
      node -v
npm -v
    • 这将显示Node.js和npm（Node包管理器）的版本信息，确认它们已经成功安装。
    • 安装完成后，可以使用以下命令启动Vue CLI的图形界面： 
      vue ui
  2. 安装Vue CLI：
    • 一旦Node.js安装成功，你可以通过npm全局安装Vue CLI： 
      npm install -g @vue/cli
    • 安装完成后，你可以通过以下命令检查Vue CLI是否安装成功： 
      vue --version
    • 这将显示Vue CLI的版本信息，确认它已经成功安装。

使用Vue CLI创建Vue3项目

Vue CLI提供了一种快速创建Vue应用的方法。使用vue create命令可以很容易地创建一个基于Vue3的项目。

  1. 创建Vue3项目：

    • 在命令行中运行以下命令来创建一个新项目，并指定使用Vue3： 
      vue create my-vue3-project
    • 在创建过程中，会出现一个页面选择器，你可以选择想要的预设，或者自定义配置。选择一个预设或自定义配置以使用Vue3：
      • 在“请选择预设或自定义配置”中选择“手动选择特性”。
      • 在弹出的选项中选择“Vue 3”，并确保选择其他所需的特性，如Babel、TypeScript等。
    • 按照提示完成项目的创建。
  2. 目录结构：
    • 创建的项目将具有以下目录结构： 
      my-vue3-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   ├── router/
│   └── store/
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js
    • public/目录存放公共资源文件，如index.html。
    • src/目录是项目的源代码目录，包含组件、路由、状态管理、入口文件等。

运行Vue3项目

成功创建项目后，你可以使用Vue CLI提供的命令来启动项目进行开发。

  1. 启动开发服务器：

    • 进入项目目录并运行以下命令启动开发服务器： 
      cd my-vue3-project
npm run serve
    • 这将启动一个本地开发服务器，默认地址为http://localhost:8080。你可以通过浏览器访问该地址查看项目。
    • 开发服务器会自动编译和重新加载，使你能够在开发过程中即时看到更改的效果。
  2. 构建项目：
    • 当项目开发完成，需要进行部署时，可以使用以下命令构建生产环境的文件： 
      npm run build
    • 这将生成位于dist/目录下的压缩文件，这些文件可以直接部署到任何静态文件服务器上。
Vue3基本语法

模板语法

Vue3使用模板语法来将HTML结构与Vue实例的数据绑定在一起。模板语法允许你以声明方式将DOM与Vue实例的数据绑定在一起。常用的绑定方式包括插值表达式、指令、事件处理等。

  1. 插值表达式：

    • 插值表达式用于在HTML中显示Vue实例的数据。表达式会根据Vue实例的数据动态更新。
    • 语法： 
      <span>{{ message }}</span>
    • 示例代码： 
      <template>
<div>
 <p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
 return {
   message: 'Hello, Vue3!'
 }
}
}
</script>

  2. 指令：

    • 指令是带有v-前缀的特殊特性，用于指示Vue如何将DOM与Vue实例的数据绑定在一起。
    • 常用指令包括v-bind（绑定属性）、v-on（绑定事件）、v-model（双向绑定）、v-if（条件渲染）等。
    • 示例代码： 
      <template>
<div>
 <button v-on:click="count++">点击我，会增加计数</button>
 <p>{{ count }}</p>
</div>
</template>
<script>
export default {
data() {
 return {
   count: 0
 }
}
}
</script>
  3. 循环渲染：
    • 使用v-for指令进行循环渲染。
    • 语法： 
      <ul>
<li v-for="item in items">{{ item }}</li>
</ul>
    • 示例代码： 
      <template>
<ul>
 <li v-for="item in items">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
 return {
   items: ['Apple', 'Banana', 'Cherry']
 }
}
}
</script>

事件处理

Vue3提供了一套简洁而强大的事件处理机制。你可以使用v-on指令来绑定事件处理器。事件处理器接收一个参数$event，表示触发事件的原始事件对象。

  1. 基本用法：

    • 使用v-on绑定事件处理器： 
      <button v-on:click="handleClick">点击我</button>
    • 示例代码： 
      <template>
<div>
 <button v-on:click="handleClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
 handleClick() {
   console.log('按钮被点击了');
 }
}
}
</script>
  2. 修饰符：
    • Vue3中的事件处理可以使用修饰符来简化常见任务，如阻止事件冒泡、阻止默认行为等。
    • 示例代码： 
      <template>
<div>
 <a href="https://www.baidu.com" v-on:click.stop.prevent="handleClick">点击我</a>
</div>
</template>
<script>
export default {
methods: {
 handleClick() {
   console.log('链接被点击了，但不会跳转，也不会冒泡');
 }
}
}
</script>

计算属性与侦听器

计算属性和侦听器是Vue3中处理视图数据变更的重要特性。

  1. 计算属性：

    • 计算属性是基于依赖数据进行缓存的数据处理器，只有在依赖数据变更时才会重新计算。
    • 语法： 
      computed: {
fullName: function() {
 return this.firstName + ' ' + this.lastName;
}
}
    • 示例代码： 
      <template>
<div>
 <p>姓名：{{ fullName }}</p>
 <input type="text" v-model="firstName" />
 <input type="text" v-model="lastName" />
</div>
</template>
<script>
export default {
data() {
 return {
   firstName: '',
   lastName: ''
 }
},
computed: {
 fullName() {
   return this.firstName + ' ' + this.lastName;
 }
}
}
</script>
  2. 侦听器：
    • 侦听器可以监听Vue实例上的数据变化，并在数据变化时执行相应的函数。
    • 语法： 
      watch: {
firstName: function(newVal, oldVal) {
 console.log('firstName从' + oldVal + '变为' + newVal);
}
}
    • 示例代码： 
      <template>
<div>
 <p>姓名：{{ fullName }}</p>
 <input type="text" v-model="firstName" />
 <input type="text" v-model="lastName" />
</div>
</template>
<script>
export default {
data() {
 return {
   firstName: '',
   lastName: ''
 }
},
computed: {
 fullName() {
   return this.firstName + ' ' + this.lastName;
 }
},
watch: {
 firstName: function(newVal, oldVal) {
   console.log('firstName从' + oldVal + '变为' + newVal);
 }
}
}
</script>
组件化开发

创建组件

组件是Vue3中的基本构建块，它代表了一个可重用的、独立的UI组件。组件可以包含自己的模板、样式和逻辑，可以在应用中复用。

  1. 定义组件：

    • 可以通过Vue.component全局注册组件，或者通过import和export在单文件组件中定义组件。
    • 示例代码： 
      <template>
<div>
 <p>这是我的第一个组件：{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
 return {
   message: 'Hello, Component!'
 }
}
}
</script>
<style scoped>
/* 局部样式 */
div {
color: red;
}
</style>

  2. 注册组件：

    • 在main.js中注册组件：

      import MyComponent from './components/MyComponent.vue';

Vue.component('my-component', MyComponent);
    • 在模板中使用组件： 
      <my-component></my-component>

使用组件

在一个Vue3应用中，你可以通过注册并使用组件的方式，将应用拆分为多个独立且易于管理的部分。

  1. 在模板中使用组件：

    • 在使用组件的模板文件中引入并使用组件： 
      <my-component></my-component>

    • 示例代码：

      <template>
<div>
 <p>This is the main component:</p>
 <my-component></my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';

export default {
components: {
 MyComponent
}
}
</script>

传递数据与事件

组件之间的通信是通过属性和事件来实现的。父组件可以将数据传递给子组件，而子组件可以通过事件向父组件传递数据。

  1. Props：

    • 父组件可以向子组件传递数据，使用props选项来定义接受的数据类型。

    • 示例代码：

      <template>
<my-component message="Hello from parent"></my-component>
</template>
<script>
import MyComponent from './components/MyComponent.vue';

export default {
components: {
 MyComponent
}
}
</script>
      <template>
<div>
 <p>Message from parent: {{ message }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: ['message']
}
</script>

  2. Events：

    • 子组件可以通过$emit方法向父组件传递事件。

    • 示例代码：

      <template>
<my-component @custom-event="handleCustomEvent"></my-component>
</template>
<script>
import MyComponent from './components/MyComponent.vue';

export default {
components: {
 MyComponent
},
methods: {
 handleCustomEvent(payload) {
   console.log('事件触发了', payload);
 }
}
}
</script>
      <template>
<div>
 <button @click="triggerEvent">触发事件</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
methods: {
 triggerEvent() {
   this.$emit('custom-event', '事件数据');
 }
}
}
</script>

动态组件

动态组件允许你根据不同的条件在不同的组件之间进行切换。这可以通过<component>元素和is属性来实现。

  1. 基本用法：

    • 通过<component>元素和is属性动态渲染不同的组件。

    • 示例代码：

      <template>
<div>
 <button @click="currentComponent = 'MyComponentA'">组件A</button>
 <button @click="currentComponent = 'MyComponentB'">组件B</button>
 <component :is="currentComponent"></component>
</div>
</template>
<script>
import MyComponentA from './components/MyComponentA.vue';
import MyComponentB from './components/MyComponentB.vue';

export default {
data() {
 return {
   currentComponent: 'MyComponentA'
 }
},
components: {
 'MyComponentA': MyComponentA,
 'MyComponentB': MyComponentB
}
}
</script>

Composition API创建组件

Composition API 是一种新的API，用于组织和重用Vue组件中的逻辑。以下是使用Composition API创建组件的示例：

  1. 基本用法：

    • 使用<script setup>语法来定义和使用Composition API。

    • 示例代码：

      <template>
<div>
 <button @click="increment">点击我，会增加计数</button>
 <p>{{ count }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';

let count = ref(0);

const increment = () => {
count.value++;
}
</script>
Router路由管理

安装Vue Router

Vue Router是Vue.js官方推荐的路由管理器，它允许你通过URL导航到不同的视图。要使用Vue Router，你需要先安装它。

  1. 安装Vue Router：

    • 使用npm安装Vue Router： 
      npm install vue-router@next

    • 示例代码：

      <template>
<div>
 <router-view></router-view>
</div>
</template>
<script>
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];

const router = createRouter({
history: createWebHistory(),
routes
});

export default {
router
}
</script>

配置路由

Vue Router的配置包括定义路由和将路由映射到组件。你需要在路由配置文件中定义路由，然后在主应用文件中引入并使用这些路由。

  1. 基本配置：

    • 在配置文件中定义路由： 
      const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
    • 将路由映射到组件： 
      const router = createRouter({
history: createWebHistory(),
routes
});

    • 在主应用文件中使用路由：

      <template>
<div>
 <router-link to="/">主页</router-link>
 <router-link to="/about">关于</router-link>
 <router-view></router-view>
</div>
</template>
<script>
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];

const router = createRouter({
history: createWebHistory(),
routes
});

const app = createApp({});
app.use(router);
app.mount('#app');
</script>

路由参数与查询参数

通过定义路由参数和查询参数可以在不同的路由之间传递数据。

  1. 定义路由参数：

    • 通过在路径中使用动态参数来定义路由参数： 
      const routes = [
{ path: '/user/:id', component: User }
];
    • 在组件中访问路由参数： 
      <script>
export default {
name: 'User',
created() {
 console.log(this.$route.params.id);
}
}
</script>
  2. 定义查询参数：
    • 通过在路径中添加查询参数来定义查询参数： 
      const routes = [
{ path: '/search', component: Search }
];
    • 在组件中访问查询参数： 
      <script>
export default {
name: 'Search',
created() {
 console.log(this.$route.query.q);
}
}
</script>

路由守卫

路由守卫可以帮助你在导航过程中进行权限控制、数据预加载等操作。

  1. 全局守卫：

    • 在路由实例中定义全局守卫： 
      router.beforeEach((to, from, next) => {
console.log('导航即将进入', to.fullPath);
next();
});

    • 在主应用文件中使用全局守卫：

      const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
console.log('导航即将进入', to.fullPath);
next();
});

const app = createApp({});
app.use(router);
app.mount('#app');
  2. 组件内守卫：
    • 在组件内定义导航守卫： 
      <script>
export default {
name: 'MyComponent',
beforeRouteEnter(to, from, next) {
 console.log('导航即将进入');
 next();
}
}
</script>
Vuex状态管理

安装Vuex

Vuex是Vue.js的官方状态管理库，用于管理应用的状态。要使用Vuex，你需要先安装它。

  1. 安装Vuex：

    • 使用npm安装Vuex： 
      npm install vuex@next

    • 示例代码：

      <script>
import { createStore } from 'vuex';

const store = createStore({
state: {
 count: 0
},
mutations: {
 increment(state) {
   state.count++;
 }
}
});

export default {
store
}
</script>

配置Store

Vuex的store对象包含状态（state）、改变状态的函数（mutations）、异步操作函数（actions）、获取状态的函数（getters）等。

  1. 基本配置：

    • 定义store对象：

      import { createStore } from 'vuex';

const store = createStore({
state: {
 count: 0
},
mutations: {
 increment(state) {
   state.count++;
 }
}
});

    • 在主应用文件中使用store：

      import { createApp } from 'vue';
import store from './store';

const app = createApp({});
app.use(store);
app.mount('#app');

  2. Mutation：

    • Mutation是同步改变状态的函数： 
      mutations: {
increment(state) {
 state.count++;
}
}

  3. Action：

    • Actions可以包含异步操作，它们通过提交mutation来改变状态： 
      actions: {
increment({ commit }) {
 setTimeout(() => {
   commit('increment');
 }, 1000);
}
}
  4. Getter：
    • Getter用于从store中获取数据： 
      getters: {
doubleCount(state) {
 return state.count * 2;
}
}

使用Store管理全局状态

在组件中通过store对象来访问和改变状态。

  1. 访问状态：

    • 在组件中访问状态：

      <template>
<p>{{ count }}</p>
</template>
<script>
import { mapState } from 'vuex';

export default {
computed: {
 ...mapState(['count'])
}
}
</script>

  2. 改变状态：

    • 在组件中通过store.commit来改变状态：

      <template>
<button @click="increment">增加计数</button>
</template>
<script>
import { mapMutations } from 'vuex';

export default {
methods: {
 ...mapMutations(['increment'])
}
}
</script>

Actions、Mutations与Getters

  1. Actions：

    • Actions用于异步操作，通过store.dispatch来调用：

      actions: {
increment({ commit }) {
 setTimeout(() => {
   commit('increment');
 }, 1000);
}
}
      • 在组件中使用dispatch： 
        <script>
import { mapActions } from 'vuex';

      export default {
      methods: {
      ...mapActions(['increment'])
      }
      }
      </script>

      

      • 

    

    2. 

  2. 

    Mutations：
    

      

    • Mutations是同步改变状态的函数：

      mutations: {
increment(state) {
 state.count++;
}
}
      • 

    

    3. 

  3. 

    Getters：
    

      

    • 

      Getters用于从store中获取数据：
      

      getters: {
doubleCount(state) {
 return state.count * 2;
}
}
      

        

      • 在组件中使用getters：

        <script>
import { mapGetters } from 'vuex';
        • 

      

      export default {
      
computed: {
      
...mapGetters(['doubleCount'])
      
}
      
}
      
</script>
      

      

      • 

    

    4. 


项目优化与部署

代码分割


代码分割是Vue3中重要的优化技术，它允许你将代码分割成多个包，从而提高应用的加载速度和性能。通过动态导入模块，可以实现按需加载。


    

  1. 

    基本用法：
    

      

    • 使用import()函数进行代码分割：

      const MyComponent = () => import('./components/MyComponent.vue');
      • 

    • 示例代码：

      <script>
export default {
components: {
 MyComponent: () => import('./components/MyComponent.vue')
}
}
</script>
      • 

    

    2. 

  2. 

    动态导入：
    

      

    • 

      通过动态导入组件来实现按需加载：
      

      <template>
<div>
 <button @click="loadComponent">加载组件</button>
 <component v-if="isLoaded" :is="dynamicComponent"></component>
</div>
</template>
<script>
import { ref } from 'vue';

export default {
setup() {
 const isLoaded = ref(false);
 const dynamicComponent = ref(null);

 const loadComponent = async () => {
   dynamicComponent.value = await import('./DynamicComponent.vue');
   isLoaded.value = true;
 }

 return {
   isLoaded,
   dynamicComponent,
   loadComponent
 }
}
}
</script>
      

      • 

    

    3. 



样式配置


Vue3项目中可以通过多种方式配置样式，包括CSS、CSS Modules、SCSS等。


    

  1. 

    CSS：
    

      

    • 在单文件组件中直接使用<style>标签：

      <template>
<div class="my-class">Hello, Vue3!</div>
</template>
<script>
export default {};
</script>
<style>
.my-class {
color: red;
}
</style>
      • 

    • 在项目根目录下的vue.config.js中配置CSS预处理器：

      module.exports = {
css: {
 loaderOptions: {
   sass: {
     additionalData: `@import "@/assets/styles/main.scss";`
   }
 }
}
};
      • 

    

    2. 

  2. 

    CSS Modules：
    

      

    • 使用CSS Modules可以实现局部样式，避免全局样式污染：

      <template>
<div :class="$style.myClass">Hello, Vue3!</div>
</template>
<script>
export default {};
</script>
<style module>
.myClass {
color: red;
}
</style>
      • 

    

    3. 

  3. SCSS：

      

    • 使用SCSS预处理器可以编写更复杂的样式：

      <template>
<div class="my-class">Hello, Vue3!</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.my-class {
color: red;
font-size: 20px;
}
</style>
      • 

    4. 



项目构建与部署


项目构建和部署是将开发完成的应用发布到生产环境的最后一步。Vue CLI提供了方便的构建命令，可以生成生产环境的静态文件，并部署到服务器上。


    

  1. 

    构建项目：
    

      

    • 运行以下命令构建项目：

      npm run build
      • 

    • 构建后的文件将位于dist/目录下。
      • 

    

    2. 

  2. 

    部署项目：
    

      

    • 将dist/目录下的文件部署到服务器。可以使用FTP工具或云服务提供商的管理界面进行部署。
      • 

    • 示例代码：

      cp -r dist/* /var/www/html/
      • 

    • 或者使用云服务提供商如Netlify、Vercel等进行部署。
      • 

    • 通过Netlify部署：

      netlify deploy --dir=dist
      • 

    

    3. 

  3. 环境变量：

      

    • 使用.env文件来管理环境变量：

      NODE_ENV=production
VUE_APP_API_URL=https://api.example.com
      • 

    • 在Vue3项目中引用环境变量：

      process.env.VUE_APP_API_URL
      • 

    4. 



通过以上步骤，你可以从零开始搭建一个Vue3项目，并掌握Vue3的基本语法、组件化开发、路由管理、状态管理和项目优化与部署。希望这些内容能帮助你更好地理解和使用Vue3。

					

					

						

						
					

                    

                        这篇关于Vue3学习入门：从零开始搭建第一个Vue3项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
                    


                


                
                
 

                
                

                    

                        
您可能喜欢

                        
                    

                

                

            

             
            
            
            
        

        
        

        

            

                
栏目导航