前端框架Vue闪电入门，11步从懵懂到应用，欧耶！

15195775117

前言：

今年年初，春节之后，我开始学习前端框架Vue，
由于没有基础，看得云里雾里，好在最后啃下来了，
基础流程和坑我总结了一些，分享给需要的同仁！


一、预备知识

学习Vue需要先学习【原生前端】，即html+css+JavaScript(简称JS)，
JS的语法以前是混乱的，好比各有各的方言，现在有统一标准，即ECMAScript(简称ES)，
现在JS的最新标准是ES6，所以买JS的书注意应是ES6标准的。

ES6的权威书籍是《ES6标准入门(阮一峰)》,在线阅读地址：
https://es6.ruanyifeng.com/

如果你已经入门了【原生前端】，就可以继续了。

二、安装解释器(node.js)

我们写Python代码需要安装Python解释器，即Python.exe，它提供了Python代码的运行环境。
我们写C语言需要装VS，写Java需要装JVM...
进行前端开发也需要先安装node.exe，它是前端语言和框架(JS,Vue等)的解释器，提供了运行环境，即Node.js

Node下载地址：https://nodejs.org/en/
选择LTS版！
安装时千万注意：不要选择安装其他的东西，会连带给你下载安装很多用不上的！

安装好后，在cmd查看node版本：node -v

番外：node执行js文件
cmd进入js脚本目录，node "Hello World.js"
跟python xxx.py类似，只是多了引号

三、安装编辑器(vscode)

先安装vscode，
然后安装一个通用的Vue插件，可以显示语法，
再安装插件vue-format，选中代码后右击有“vue-format”选项，可自动将代码调整好，缩进很规范，输入时还支持自动补全


四、安装第三方js模块


JS跟Python一样拥有庞大的第三方模块库，
NodeJS社区就收录了大量开源的js模块，
js模块使用npm命令安装，类似Python的pip：
npm install 模块名


【安装加速方法】
Python中，pip默认从国外资源下载模块，速度较慢，可以
安装pqi模块：pip install pqi
设置使用国内阿里云资源：pqi use aliyun

npm也是默认使用国外资源下载模块，可转为使用国内淘宝资源：
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后我们安装模块使用cnpm命令：cnpm install 模块名

五、版本选择

注意：我们学习的是Vue2.x
Vue3.x虽然已经出来了，但其兼容性还有待完善，一些模块尚未来得及跟进。
与Vue2.x对应的Element是element-ui
与Vue3.x对应的Element是element-plus

六、cli构建vue项目

1、设计一个项目文件夹名，例如myfrontend
2、cd进入某目录，该位置将是项目文件夹的上级
3、安装Vue2：npm install vue-cli -g
4、初始化项目：vue init webpack myfrontend
        跟着导航走，注意顺带安装下router
5、进入项目目录：cd myfrontend
6、安装需要的插件：cnpm install
        (生成了node_modules文件夹)

(如果还有问题可以试试：cnpm install vue --save)

以调试模式运行项目：npm run dev
根据cmd中的提示，在浏览器打开：http://localhost:8080/
即可看到vue的默认网页效果

七、项目结构

项目构建后，项目目录内有几个文件夹，我们只需要关心src文件夹，开发代码都在这里，src内还有3个文件夹：

assets	存放静态资源
components	存放组件文件，即.vue文件
router	存放路由

八、安装第三方模块

• 安装Element
  

Vue可以引用一些UI组件库，如：
Element UI,Ant Design of Vue UI,iView UI,vuetify,...

Element的Vue2版本是：element-ui
安装命令：npm i element-ui -S
官网教程：https://element.eleme.cn/#/zh-CN

• 安装ECharts
  

cnpm install echarts -S

• 安装axios
  

发起get/post请求需要http插件，推荐 axios，
插件vue-resource已过时，注意，$http.get是vue-resource的语法

安装axios：cnpm install --save axios

get请求写法示例

url='xxxxxxxxxxxx'
axios.get(url).then(function (response) {
          that.answer = response.data.locations
  }).catch(function(error){
        console.log(error);
  })
其中response就是json格式返回值

post请求写法示例

需要随post请求发送的数据：
var post_data={"center": "115.672126,38.817129","radius": "1000"}
post请求的地址：url='xxxxxxxxxxxxxx'
发送请求：
        axios.post(url,post_data)
          .then(function (response) {
                  that.answer = response.data.data
          }).catch(function(error){
                console.log(error);
          })
其中response就是json格式返回值

跨域问题的解决方法

需要在后端服务器设置跨域，不要试图在前端解决。

九、项目编写

Vue项目的主要编写形式是：
1、在src/components中写一个组件文件
2、然后将其在src/router/index.js中写好路由
一个又一个，若干的组件构成了整个项目

注意：
1、组件的路径不能有大写
2、url: require('@/assets/gps1.png')
这里的@就代表是 src，表示在 src 路径下找文件

新建组件的方法

新建组件文件NewHello.vue，写入：
<template><div><h1>{{msg}}</h1></div></template>
<script>
export default{
    name:'NewHello',
    data(){
        return {
            msg:'俺滴自定义组件'
        }
    }
}
</script>
然后，在src/router/index.js中引入该组件，并新增路由，注意方框内容：
import NewHello from '@/components/NewHello'
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // 新增路由：
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: NewHello
    }
  ]
})
访问：http://localhost:8080/#/HelloWorld
即可看到新组件的效果。

组件是Vue的基本单元，很多基础组件，例如按钮、输入框、进度条、走马灯，我再另开帖子详细说。

项目备份技巧

一个Vue项目通常要写好多天，这就需要备份。
备份整个项目，会有好几百兆，太大，其实没必要。
因为开发代码全在src文件夹，所以备份它即可。
node_modules文件夹可以不要，你只需要保留Vue项目的其他部分，执行cnpm install，node_modules文件夹的内容就会自动安装。

十、打包步骤

1、检查注释是否规范

遇到几次npm打包失败的情况，原因在于注释不规范，正确的注释如下：

部分	注释写法
template部分	<!--xxx-->
script部分	//xxx
style部分	/*xxx*/

不知是不是因为插件没装对，我的vscode上在style部分实用Ctrl+/，生成的是<!--xxx-->注释，这在调试时无碍，打包时报错！

2、修改文件

config/index.js中有2处：assetsPublicPath: '/'
路径改为相对路径，即加个点：assetsPublicPath: './'
注意：不是src/router/index.js
注意：之后再使用调试模式，需要改回去，不然会报错“Cannot GET /”

3、执行打包命令

npm run build
提示：
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
虽然有提示，但不影响。
打包的文件位于dist文件夹内，该文件夹可拷出来独立使用了。

4、查看效果

打开：dist/index.html,
浏览器会打开，地址为：
file:///C:/Users/.../Desktop/myfrontend/dist/index.html#/
在后面追加路由变量：
file:///C:/Users/.../Desktop/myfrontend/dist/index.html#/Example_forms
即可看到该路由下的组件效果

十一、vue打包文件嵌入Django项目

Django项目使用Vue打包文件有2种方式：

1、媒体资源模式

Vue打包文件直接放在Django项目下的media文件夹，
该方式下，前端资源可由IIS服务器直接访问，无需通过Django的app

2、静态资源模式

vue打包后生成dist文件夹，它包括index.html和static文件夹，
把Vue的index.html放在Django项目的模板文件夹templates，
把Vue的static文件夹放在Django项目的静态资源文件夹static，

静态资源模式会出现的问题：

(1)Vue打包文件里的媒体文件的路径是在Django的static里的，
而static文件夹是不能被外部get或post访问的，于是会出错
所以，媒体文件的路径在之前就得想好。

(2)需要修改index.html中调用static资源的目录

(3)打开前端网页可能会发现丢失了一些元素，原因是文件路径错乱
        解决方式：我们将
        Django项目路径\static\static\fonts
        之下2个文件：
        element-icons.535877f.woff
        element-icons.732389d.ttf
        放进：
        Django项目路径\static\static\css\static\fonts
        之下，即可

跺碎那片云

前些天学了一点前端做了个网站，看完你这个，我感觉好多东西都没学过

15195775117

跺碎那片云 发表于 2021-10-11 11:20
前些天学了一点前端做了个网站，看完你这个，我感觉好多东西都没学过

不会吧？莫非你是超脱了这些俗物的天才？