构建vue初始化项目:vue create 命令构建vue项目

首先找到自己的文件夹
1.创建vue项目:vue create vue
构建vue初始化项目:vue create 命令构建vue项目_第1张图片
2.选择Manually select features自定义创建
构建vue初始化项目:vue create 命令构建vue项目_第2张图片
3.选择vue版本(这里选择的是vue2)
构建vue初始化项目:vue create 命令构建vue项目_第3张图片
4.
构建vue初始化项目:vue create 命令构建vue项目_第4张图片
5.
构建vue初始化项目:vue create 命令构建vue项目_第5张图片
6.
构建vue初始化项目:vue create 命令构建vue项目_第6张图片
7.
构建vue初始化项目:vue create 命令构建vue项目_第7张图片
8创建完成
构建vue初始化项目:vue create 命令构建vue项目_第8张图片
创建完项目后先删除node_modules然后执行
npm设置淘宝镜像加速:npm config set registry https://registry.npm.taobao.org

然后再执行
npm安装: npm install
vue-cli安装:npm install -g @vue/cli
完毕后执行

安装ElementUI:npm i element-ui -S
安装完毕后在main.js中引用:

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

Vue.use(ElementUI,{size:"small"})

运行vue项目:

cd vue

npm run serve

目录结构:
构建vue初始化项目:vue create 命令构建vue项目_第9张图片
router文件夹是路由文件夹,文件夹中的index.js是用来定义某个vue模块的路由。
定义路由的方法:

import HomeView from '../views/AboutView.vue'

const routes = [
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }]

在这个文件中定义完成后可以在app.vue中将路由名称展示出来


views文件夹中可以用来写新增的功能

你可能感兴趣的:(vue.js,javascript,前端)