Vue+Element+Wepack项目搭建

环境搭建:

  1. 打开cmd进入文件夹。
  2. npm install -g vue-cli全局安装vue-cli
    在这里插入图片描述
  3. vue init webpack vue-demo新建项目,vue-demo是项目的名字
  4. cd到当前项目 , 运行 npm i element-ui -S安装element-ui
  5. 打开src目录下的main.js引用element-ui
    在这里插入图片描述
  6. npm install
  7. npm run dev运行项目
  8. npm run build ,运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了。

项目目录:

  1. index.html文件入口 ;
  2. src放置组件和入口文件 ;

src目录下的main.js文件就是入口文件。
App.vue是主组件,所有组件都是在App.vue下进行切换的。
components文件夹是存放组件的地方,
assets文件夹存放的是图片,
router文件夹存放的是路由

一个.vue文件包含三个部分<template><script><style>

给style添加scoped来使得当前样式只作用于当前组件的节点。

<router-view></router-view>标签,它用于渲染匹配的组件。

  1. node_modules为依赖的模块 ;
  2. config中配置了路径端口值等;
  3. dist是存放打包之后的东西;
  4. build中配置了webpack的基本配置、开发环境配置、生产环境配置等。

猜你喜欢

转载自blog.csdn.net/wsln_123456/article/details/88667522