一、vue脚手架
1.1简介
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
1.2命令行操作步骤
- npm install -g @vue/cli 安装3.x版本的vue脚手架
- vue -V 测试是否安装成功
- vue create 项目名 (注意不要用中文和特殊字符)
- cd 项目名
- npm run serve
从vue create my-project为例展示截图
这是选择手动安装项目功能
选择vue的版本
最后cd到你自己创建的项目中,npm run serve把项目跑起来即可。
此时跑起来后就会显示下面的界面
此时我们在浏览器输入上面提示的网址,显示效果如下:
1.3图形界面操作步骤
- vue ui (命令行输入此命令,打开一个界面化的操作平台)
此时显示效果如下:
自己创建项目并命名
创建好项目以后,我们点击任务中的启动按钮,可以启动服务也可以关闭项目。
启动以后我们访问localhost:8000也能正常打开我们刚才创建的项目,此种方式更方便和快捷。
二、修改配置
如果我们需要启动服务的时候自动打开浏览器,我们可以在项目的根目录下面手动创建vue.config.js,配置如下:
module.exports = {
devServer: {
open: true
// port: 8888 如果有需要可以更新端口号
}
};
三、Element-UI
3.1简介
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
3.2使用步骤
3.2.1命令行方式创建
我们打开我们前面用命令行创建的my-project项目,在命令行执行下面的命令
- npm install element-ui -S
- src/main.js导入element-ui,代码如下:
// 导入element-ui
import ElementUI from "element-ui";
// 导入elemet-ui中的样式文件
import "element-ui/lib/theme-chalk/index.css";
// 注册elemetui
Vue.use(ElementUI);
- 在src/App.vue中随便粘下来一个板块的内容,然后重新运行npm run serve打包命令,此时浏览器访问就能显示对应的样式和标签内容了
此时可能会报错 因为ESLint的语法检查起作用了,我们可以打开vscode,暂时把它关闭,熟悉之后我们再打开。
关闭步骤:
1、setting--搜索ESlint,把三项的eslint设置都改完忽略,重启vscode即可。
2、此时打开页面如下
3.2.2图形式方式按住element-ui
-
vue-ui 打开图形化界面
-
插件--添加插件--搜索ElementUI
-
选择按需导入
-
npm run serve 启动项目
-
页面显示正常,button也正常引入了
三、创建组件
3.1 创建组件模板
每一个vue的单页面组件都是由三部分组成:
- template代表结构,也就是相当于我们以前学的html
- script相当于我们以前学的js
- style相当于我们以前学的css
比如我们在views下面新建News.vue页面(一般文件的名字是首字母大写),我们如果手动去写基本结构比较麻烦,建议用下面的配置
vscode中的file-preferences-user snippets,然后输入vue,输入模板如下:
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" mounted(){},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style lang='less' scoped>",
"</style>"
],
"description": "Log output to console"
}
}
备注
上面的prefix代表你要生成结构所用的快捷键,body里面是生成的结构模板,自己可以修改。
我们保存以后下次再新建xx.vue页面,输入vue然后按tab键就会自动生成下面类似的结构模板。
3.2修改路由
我们根据新建的vue页面创建路由如下: