创建脚手架

一、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的单页面组件都是由三部分组成：

1. template代表结构，也就是相当于我们以前学的html
2. script相当于我们以前学的js
3. 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页面创建路由如下：