【测试平台学习1】 vue使用与启动

前言

最近打算构建一个测试平台，初步的构想是Django+Vue ,首先需要简单学习下VUE

 

Vue 基础

Vue-api : https://cn.vuejs.org/v2/api/

Vue-教程： https://cn.vuejs.org/v2/guide

Vue-简单视频教学： https://learning.dcloud.io/#/?vid=14  【这里官网推荐大家使用HBuilder 进行VUE的编写，实测效果很差，推荐使用VS code】

好了，通过如上的课程，对Vue 应该有了基础的认识，知道怎么设置字体，按钮，列表，插值 这些基础概念，当然这些都是皮毛，实际上在搭建平台的时候会遇到很多问题

 

Vue 安装

vue基础里面教过了，使用的时候可以直接调用vue的在线版本，也可以调用下载下来的js文件，主要的几个打包工具和依赖库需要注意下：

1. 安装npm （自行百度，安装好了之后执行 npm -v）

    `npm` 全称为 `Node Package Manager`，是一个基于`Node.js`的包管理器

2. 安装nrm (官方教程会推荐大家去安装cnpm，由于网络原因，使用cnpm会快一点，实测在使用的时候打包可能会遇到各种问题，建议放弃)

    

ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src
Module not found: Error: Can't resolve './src' in 'C:\WebstormProjects\webpack-demo'
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src

    这个问题网上答案很多，建议直接删除node_modules ，使用npm install

    npm i -g nrm  

    nrm ls （可以查看有什么 可供使用的依赖源，一般用淘宝的）

    npm config set registry https://registry.npm.taobao.org

    检查源是否设置成功：

    npm config get registry

    或者直接指定源     npm install --registry https://registry.npm.taobao.org   --------------------------------------------------------------------------------------------------------     安装 vue 命令行格式,如下命令分别是安装命令行，webpack打包器，命令行初始化，初始化vue项目      npm install -g @vue/cli      npm install webpack      npm i -g @vue/cli-init      vue init webpack [your vue project name]   需要注意的是，如果使用vue ui (教程上面推荐的界面方式创建的vue项目，会比命令行的方式少几个文件夹，然后就尴尬了。)      3. 启动Vue    首先是打包 npm install （正常情况下执行一次就行了，后面都不用了，除非有新的依赖包需要加入，单独安装即可，例如：npm install babel）     然后启动： npm run dev (npm run server) ，看到如下信息的时候，你的VUE应用就启动完成了，访问http://localhost:8080 即可    VUE的host 和端口设置放在  ./config/index.js 下，可以自行修改。而且VUE非常智能，一旦发现你设置的端口被占用，它会自动启用到你设置的端口+1 （8081）