vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度)

  1:打开终端:

    

  这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹然后进去在执行下一步,如果你也想在桌面新建的话,就

    就在终端里面输入cd desktop摁回车就进到桌面了

    

    ,然后再cd 文件夹名字

    

    

2: 输入命令vue init webpack-simple vueElemente 回车

    

    此时你就在文件夹vueElement里面新建了一个名字叫 elm_dome的vue项目

    项目描述是 A Vue.js project(可以自己规定)

    作者是lijuntao(可自己规定)

    不用sass这个你自己选择可用可不用

    还有一种新建项目的方法

    vue init webpack vueElement 回车(这个一般对应比较大的项目工程,你可以两个都试试看有什么不用)

3:按上面提示做:

    cd vueElement  回车

    npm install ( 我使用的是cnpm install, 两种一样,这个是淘宝镜像方法,因为比较快,不懂的自行百度)

    

  上图就是正在下载项目项目所需的依赖,

  下图是成功后的样子:

    

 4:启动项目

    npm run dev 回车

    

    这样就新建新建了一个vue项目 端口是8080,后期项目多了可能需要更改端口,

    如何改端口?

    进入到文件夹 vueElement里面找到 package.json文件

    

    在如下位置添加 - - port 8023

     

  然后回到终端重启项目

    ctrl +c

    npm run dev

    

    

  端口是8023

使用element-ui组件 

  http://element.eleme.io/#/zh-CN/component/upload文档位置

回到终端:

  npm i element-ui -S    相当于 npm install element- ui --save  (推荐使用淘宝镜像方法,因为快)

  

  再打开你的package.json文件,有如下变化

  

  看文档的快速上手   地址:http://element.eleme.io/#/zh-CN/component/quickstart

  

   对比自己的package.json文件就可看出,自己文件里面少了一个style-loader,所以就要去配置

   命令:

    cnpm  i  style-loader -D 回车

    

   在打开你的package.json 你会发现多了个style-loader

    

  然后配置你的webpack.config.js文件

    

    其实就是把这一部分补到你的webpack.config.js文件里面的相应位置,

    简单一句话,对比人家的和你自己的缺什么补什么,直接复制粘贴过去,

   然后就是引用element-ui

    配置mian.js文件

    也是直接对比你的mian.js文件和人家的,缺什么补什么,复制粘贴过去

   然后直接看文档例子用  

    找到你的文件夹里面的app.vue文件

      更改代码

      如图

        

    

      然后回到终端

        npm run dev

       重新运行项目

        效果图如下

            

这里只是用了element-ui里面的一个button按钮,其他组件请自行看文档实验;

  

vue 脚手架搭建新项目以及element-ui等vue组件的使用的更多相关文章

  1. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  2. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  3. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

  4. java 搭建新项目,最佳组合:spring boot + mybatis generator

    java 搭建新项目,最佳组合:spring boot + mybatis generator

  5. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  6. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  7. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  8. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  9. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

随机推荐

  1. 爬虫的基本操作 requests / BeautifulSoup 的使用

    爬虫的基本操作 爬虫基础知识 什么是爬虫? 在最开始,还没有诞生Google和百度等一系列搜索引擎的公司的时候,人们进入一些公司的网站只能通过在浏览器地址栏输入网址的方式访问,如同在很早之前前手机不流 ...

  2. linux下网卡bonding配置(转)

    linux下网卡bonding配置   章节 bonding技术 centos7配置bonding centos6配置bonding 一.bonding技术 bonding(绑定)是一种linux系统 ...

  3. 对浏览器攻击:MS10-002

    对浏览器攻击:MS10-002 MS10-002漏洞介绍 针对微软Internet Explorer"极光"内存损坏的攻击,当用户查看特制网页时允许远程执行代码. 实践过程 命令行 ...

  4. topcoder srm 693 div1 -3

    1.给出一个$n$个顶点的无向带权图.其中顶点$i,i+1$之间存在边,$i,i+2$之间存在边.而且仅有这些边.现在删掉其中的一些边,剩下的边满足图仍然是2联通的情况下使得权值和最小? 思路:其实就 ...

  5. Django框架(六) Django之模板继承

    模版导入和继承 模版导入 一个页面只能继承一个模板,如何解决了?如何使用多个模板,或者引入其他页面 <% include "a.html" %> 可以引用多次 模板,i ...

  6. Docker 入门指南——资源工具篇

    好工具 dive wagoodman/dive A tool for exploring each layer in a docker image 参考 用 Dive 看 Docker Image 裡 ...

  7. SP10707 COT2 - Count on a tree II 莫队

    链接 https://vjudge.net/problem/SPOJ-COT2 https://www.luogu.org/problemnew/show/SP10707 思路 dfs欧拉序转化为普通 ...

  8. [HEOI2016/TJOI2016]树

    [HEOI2016/TJOI2016]树 思路 做的时候也是糊里糊涂的 就是求最大值的线段树 错误 线段树写错了 #include <bits/stdc++.h> #define FOR( ...

  9. 奇怪的比赛|2012年蓝桥杯B组题解析第四题-fishers

    (8')奇怪的比赛 某电视台举办了低碳生活大奖赛.题目的计分规则相当奇怪: 每位选手需要回答10个问题(其编号为1到10),越后面越有难度.答对的,当前分数翻倍:答错了则扣掉与题号相同的分数(选手必须 ...

  10. UML类图中箭头的含义

    Explanation of the UML arrows Here's some explanations from the Visual Studio 2015 docs: UML Class D ...