首页 技术 正文
技术 2022年11月11日
0 收藏 891 点赞 2,427 浏览 1497 个字

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

  1:打开终端:

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

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

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

    ,然后再cd 文件夹名字

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

    

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

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

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

    作者是lijuntao(可自己规定)

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

    还有一种新建项目的方法

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

3:按上面提示做:

    cd vueElement  回车

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

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

  下图是成功后的样子:

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

 4:启动项目

    npm run dev 回车

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

    如何改端口?

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

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

    在如下位置添加 – – port 8023

    vue 脚手架搭建新项目以及element-ui等vue组件的使用 

  然后回到终端重启项目

    ctrl +c

    npm run dev

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

  端口是8023

使用element-ui组件 

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

回到终端:

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

  vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

  vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

  vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

   命令:

    cnpm  i  style-loader -D 回车

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

    vue 脚手架搭建新项目以及element-ui等vue组件的使用

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

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

   然后就是引用element-ui

    配置mian.js文件

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

   然后直接看文档例子用  

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

      更改代码

      如图

        vue 脚手架搭建新项目以及element-ui等vue组件的使用

    

      然后回到终端

        npm run dev

       重新运行项目

        效果图如下

          vue 脚手架搭建新项目以及element-ui等vue组件的使用  

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

  

上一篇: 01-python基础知识
下一篇: audio进度条
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,493
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297