VUE入门

安装Vue

相关名词介绍

• npm: Node.js下的包管理器。
• webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。[不懂]
• vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）[不懂+1]

安装配置步骤

1. 下载安装Node.js （官网下载一路next，安装位置以D盘为例）
   安装成功测试：命令行中输入 node -v 出现安装版本号即为成功
2. npm配置
   1.命令行输入 npm install npm@latest -g 以更新npm

   出现ERR -4048 ==>> 用管理员身份打开命令行重新运行即可
   2.将npm的全局模块的存放路径以及cache的路径配置到在Node.js的主目录下

   1. 在NodeJs下建立"node_global"及"node_cache"两个文件夹

   2. 命令行应用配置

      npm config set prefix "D:\nodejs\node_global"
      npm config set cache "D:\nodejs\node_cache"
      

      如果不进行这一步设置，npm的全局安装包，将不会在node安装文件夹(即D盘)里;而是在C:\Users\[用户名]\AppData\Roaming中。
      如果这个步骤出现错误，如：operation not permitted, mkdir ‘C:\Program Files\nodejs’，请使用管理员身份打开cmd命令行。

      配置成功测试：命令行输入 npm list -global 查看npm的本地仓库，可以看见global位置信息及安装的global包

      注意
      此时，默认的模块D:\nodejs\node_modules 目录将会改变为D:\nodejs\node_global\node_modules 目录，如果直接运行npm install等命令会报错的。
      所以需要新建环境变量name：NODE_PATH value：D:\nodejs\node_global\node_modules 然后在系统变量Path中新建%NODE_PATH%字段

3. npm换源：
   命令行输入 npm config set registry https://registry.npmmirror.com/

   命令行输入 npm config list 显示所有配置信息(cache,prefix,registry信息)

4. 安装cnpm
   1. 命令行输入 npm install -g cnpm
   2. 添加系统变量path的内容
      　　因为cnpm会被安装到D:nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。
   3. 安装成功测试：命令行输入cnpm -v命令，出现安装版本号即为成功
5. 安装 webpack：
   命令行输入 npm install webpack -g

• VUE CLI命令行工具介绍:
  • 如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
  • CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。VueCLI是一个官方发布vue.js项目脚手架。使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。脚手架依赖于node.js和webpack

2. 安装VUE CLI：
   命令行输入 npm install -g @vue/cli
   安装成功测试：命令行输入 vue -V 出现vue版本号即为成功

3. 借助VUE CLI3构建项目：
   命令行输入 vue create my-project

4. 运行项目：
   命令行输入 npm run serve

5. 安装VUE
   命令行输入 npm install vue -g

项目创建和启动流程

1. 新建vue vite项目
   命令行输入 npm init vue@latest
2. 打开项目
   命令行输入 cd vue-elm
3. 安装依赖
   命令行输入 npm install
4. 启动开发服务器
   命令行输入 npm run dev

Element Plus组件库

1. 安装Element Plus
   命令行输入 npm install element-plus --save
2. "按需导入"需要安装的插件
   命令行输入 npm install -D unplugin-vue-components unplugin-auto-import
3. 并将以下代码插入到vite.config.ts

   import { defineConfig } from 'vite'
   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
   // ...
   plugins: [
       // ...
       AutoImport({
       resolvers: [ElementPlusResolver()],
       }),
       Components({
       resolvers: [ElementPlusResolver()],
       }),
   ],
   })
   

4. 使用方式：
   将Element Plus网站上的组件查看源码复制到相应的vue文件中即可

AXIOS

1. 安装axios
   命令行输入 npm install axios
2. 使用方法：
   在想使用的vue文件中添加如下代码

   <script setup>
   import axios from 'axios'
   let Data = ref([])
   async function getUser() {
     try {
         const response = await axios.get('http://localhost:8000/sales/customers/');
         // console.log(response)
         Data.value.push(response.data)
     } catch (error) {
         console.error(error);
     }
   }
   getUser()
   ...
   </script>
   

   <template>
       ...
       <span> Message: {{ Data }}</span>
       ...
   </template>
   

3. 错误记录
   • error 301:
     url最后没有完全匹配
   • error CORS错误：跨域跨域请求失败
     • 服务器端[django]解决