Vue的创建与使用

前提摘要：vue2与vue3的区别

Vue.js 2和Vue.js 3在函数定义上有一些区别，主要是由于Vue.js 3引入了一些新的语法和特性。以下是它们之间的一些主要区别：

1. Composition API: Vue.js 3引入了Composition API，这是一种新的组织代码的方式，允许将相关逻辑组织在一起，而不是按照选项分散在不同的生命周期钩子和方法中。在Vue.js 2中，通常使用选项式API，将数据、计算属性、方法等分开定义，而在Vue.js 3中，您可以使用setup()函数来组织组件的代码逻辑。

   例如，在Vue.js 2中，您可能会这样定义一个组件：

   export default {
     data() {
       return {
         count: 0
       };
     },
     methods: {
       increment() {
         this.count++;
       }
     }
   };

   在Vue.js 3中，您可以使用Composition API来定义：

   import { ref } from 'vue';
   ​
   export default {
     setup() {
       const count = ref(0);
   ​
       const increment = () => {
         count.value++;
       };
   ​
       return { count, increment };
     }
   };

2. Setup 函数: 在Vue.js 3中，组件的setup()函数是用来替代Vue.js 2中的data、computed、methods等选项的。setup()函数在组件初始化时被调用，用于设置组件的响应式状态、方法等。在setup()函数中，您可以通过引入ref、reactive等函数来创建响应式数据。

3. ref和reactive: 在Vue.js 3中，ref和reactive是用来创建响应式数据的两个主要函数。ref用于创建单个可变值的响应式引用，而reactive用于创建包含多个属性的响应式对象。

   import { ref, reactive } from 'vue';
   ​
   // 使用 ref
   const count = ref(0);
   ​
   // 使用 reactive
   const state = reactive({
     count: 0,
     message: 'Hello'
   });

4. 事件处理: 在Vue.js 3中，事件处理稍微有所改变。事件监听器现在可以直接在模板中使用@符号绑定，不再需要使用v-on指令。另外，事件处理函数的参数也有所不同，在Vue.js 3中事件处理函数的第一个参数是原生事件对象，而不再是Vue.js 2中的事件对象。

   <!-- Vue.js 2 -->
   <button @click="handleClick">Click me</button>
   ​
   <!-- Vue.js 3 -->
   <button @click="handleClick">Click me</button>
   // Vue.js 2
   methods: {
     handleClick(event) {
       console.log(event.target);
     }
   }
   ​
   // Vue.js 3
   setup() {
     const handleClick = (event) => {
       console.log(event.target);
     };
   ​
     return { handleClick };
   }

这些是Vue.js 2和Vue.js 3在函数定义上的一些主要区别。Vue.js 3引入了Composition API和一些新的语法，使得组件的编写更加灵活和方便。

1.创建vue:

1）简单创建

npm init vue@latest

.vscode         -VSCode工具的配置文件
node_modules    -Vue项目的运行依赖文件夹(执行npm install)
public          -资源文件夹（浏览器图标）
src             -源码文件夹
.gitignore      -git忽略文件
index.html      -入口html文件
package.json    -信息描述文件
README.md       -注释文件
vite.config.js  -Vue配置文件

2）完整创建

在Django中创建Vue.js应用程序可以通过以下步骤完成：

1. 安装Vue CLI：首先，确保你的系统中已安装了Node.js和npm。然后，使用以下命令安装Vue CLI：

   npm install -g @vue/cli

2. 创建Vue项目：在Django项目的根目录下创建一个Vue项目。在命令行中执行以下命令：

   vue create front

   这将创建一个名为frontend的Vue项目。

3. 配置Vue项目：进入frontend目录，并按照提示选择Vue项目的配置选项。你可以选择默认配置或手动配置。

4. 调整Vue项目结构：在Vue项目的public目录中放置你的静态文件，如图片、样式表等。确保Vue项目中的输出文件被正确指向Django项目的静态文件目录。

5. 运行Vue应用程序：在frontend目录中运行以下命令以启动Vue开发服务器：

   npm run serve

   这将在本地启动Vue开发服务器，并提供一个URL，你可以在浏览器中访问该URL来查看Vue应用程序的运行情况。

6. 将Vue应用程序部署到生产环境：当你准备好将Vue应用程序部署到生产环境时，使用以下命令在frontend目录中构建Vue应用程序：

   npm run build

   这将在dist目录中生成一个生产就绪的Vue应用程序。然后，将这些静态文件部署到你的服务器或CDN中。