美文网首页从零开始学vue+elementUI+Jquery+layUI++springboot+mysql
从0开始安装vue+element开始搭建一个项目

从0开始安装vue+element开始搭建一个项目

作者: 2f0ecb8408ad | 来源:发表于2020-04-22 14:15 被阅读0次

1.安装node

node官网

node -v查询版本号

2.安装vue

官方镜像

npm install -g @vue/cli

可能中途会卡住

推荐淘宝镜像

 npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

然后安装最新版

cnpm i -g vue @vue/cli

3.新建vue项目

vue create vue-project

4.vue/cli 4.3.1的配置参考下面,选择需要的功能。

https://www.cnblogs.com/jasonLiu2018/p/11986917.html

5.结束

cd vue-project

npm run dev

可能出现vue : 无法加载文件,下面方法解决。
1. 以管理员身份运行PowerShell

2.执行:get-ExecutionPolicy,回复Restricted,表示状态是禁止的

3.执行:set-ExecutionPolicy RemoteSigned

4.选择Y



6.加路由

npm install vue-router --save-dev

6.1 在App.vue 中添加 <router-link to="/demo1">Demo1</router-link>

6.2 创建 demo1.vue

<template>

  <div class="test">

    <h1>This is an Demo1 page</h1>

  </div>

</template>

<script>

</script>

<style lang="">

</style>

6.3   /src/router/index.js中添加一路由

启动项目,打开 http://localhost:8080/#/demo1

加element-UI。

npm i element-ui -S

在main.js文件中 引入 element 组件  :

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

    Vue.use(ElementUI)

下图主要按钮表示成功了。

相关文章

网友评论

    本文标题:从0开始安装vue+element开始搭建一个项目

    本文链接:https://www.haomeiwen.com/subject/xlsbihtx.html