环境搭建与资料

资料

更换npm使用淘宝源
HBuilder出的基础视频课程:每次忘记的时候快速看一下
Vue CLI快速构建vue项目
Vue cli 3 老项目升级指南: 新建的项目层级简化了，配置减少了
vue-router
你要懂的单页面应用和多页面应用

移动端框架

Vant
Weex使用流行的 Web 开发体验来开发高性能原生应用的框架

简述

JavaScript 是弱类型的语。

引入外部js

import consist_params from '../../static/common'

引入css

<style>
@import '../../static/some.css'
</style>

xxx.vue文件

Vue自定义了一种后缀名名字为.vue的文件,它将html, js, css 放在一个文件种,与template script style一一对应起来。结构更合理。

<template>
<!-- html -->
<template/>

<script>
export default {};
// js
</script>

<style scoped>
// css
</style>

重点

1. 一个.vue文件就是一个单独的组件
2. .vue这个后缀的文件是自定义的，浏览器并不能识别这样的文件，所以我们最后都要npm run build一下，解析为对应的html,css,js文件
3. template里面最外层必须有且只有一个子容器，如每个vue的templage都会写一个div
4. script 中的 export default {}意思是导出这个组件可以供其他的模块使用
5. style 中的scoped意思是该样式部分只适用于该组件

Unbuntu下的环境搭建

https://cli.vuejs.org/zh/guide/installation.html

安装nodejs

方式一 使用apt-get在线安装:

更新Ubuntu软件源

sudo apt-get update
sudo apt-get install -y python-software-properties software-properties-common
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update

安装nodejs和npm

sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm

更新npm的包镜像源

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

全局安装n管理器,用于管理nodejs版本

sudo npm install n -g

安装最新的nodejs stable版本

sudo n stable
sudo node -v

方式二 源码安装

到nodejs官网，下载:node-v8.11.1-linux-x64.tar.xz

解压:

tar zxvf node-v8.11.1-linux-x64.tar.xz

创建当前路径下的node和npm的链接分别到/usr/local/bin/node和/usr/local/bin/npm中

sudo ln -s /home/lrq/node-v8.11.1-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /home/lrq/node-v8.11.1-linux-x64/bin/npm /usr/local/bin/npm

安装后查看版本信息:

node -v	

你可以使用以下命令来查看所有全局安装的模块：

$ npm list -g

安装vue

前提：nodejs已经安装

安装vue3

sudo npm install -g @vue/cli

查看vue版本

vue-V

创建工程测试

1. 执行命令:vue create 项目名称
2. 进入工程目录下,执行命令:npm run serve