【测试平台学习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:WebstormProjectswebpack-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)
   

    

原文地址:https://www.cnblogs.com/Ronaldo-HD/p/14419733.html