1. 第一次使用Vue, Vue CLI
1.1 安装Node.js运行环境,其中包含NPM包管理工具,安装好后就可以通过npm命令下载js包了。
1.2 安装cnpm镜像,提高访问速度:npm install -g cnpm
1.3 通过cnpm安装Vue CLI:cnpm install -g @vue/cli
2. 使用Vue CLI建立项目
2.1 建立存放前端项目的文件夹:cd xxx, mkdir example
2.2 在example中建立新项目:vue create demo(demo为项目名)
2.3 依次选择以下项:
Manually select features
Babel & Router(Babel是一个插件,用为编译打包时适应低版本;Router是路由器,管理路径和对应的模块)
n(不使用history mode)
In package.json(在这里存放config)
N(不保存preset)
2.4 等待下载完成,进入路径,启动项目:cd demo,npm run serve
2.5 现在打开浏览器进入屏幕显示的端口号界面,即可看到欢迎界面。
2.6 进入项目文件夹,引入必要的js组件
axios:cnpm install axios -S
font-awesome:cnpm install font-awesome -S
Element UI:cnpm i element-ui -S
2.7 在package.json中添加:
"vue": {
"publicPath":"./"
}
2.8 将索尔科技的两个文件夹替换。
3. 如何使用Vue
3.1 使用Visual Studio Code打开demo项目,找到view/index.vue,发现vue文件由3部分构成:HTML、JS、样式表
找到index.js路由器配置
3.2 在view文件夹中创建my.vue
<template>
<div>
<input type="text" v-model="info"/>
Hello World
{{info}}
<div>
<input type="checkbox" v-model="ok"/>{{ok}}
<div v-for="n in arr" :key="n">{{n}}</div>
</div>
</div>
</template>
<script>
export default {
//data()返回一个js对象,该对象描述了vue的数据部分,这些数据一般与页面进行绑定
data(){
return {
info: "Hello World Message",
ok: "true",
arr:["xxx", "yyyyy", "zzzzzz", "xxxx", "大家好"]
};
}
}
</script>
<style scoped>
</style>
说明:
scoped:样式表只在本页面有效
data(){}中return的是定义的字符串、bool值和定义的数组
上面的html中可以通过{{变量名}}调用
3.3 所有的vue在index.js中配置
import My from '../views/my.vue'
在routes中增加
{
path: "/my",
name: "Index",
component: My
}