首页 > 其他 > 详细

vue与ElementUI项目创建一

时间:2020-07-01 14:33:30      阅读:53      评论:0      收藏:0      [点我收藏+]

1、下载安装node.js  

https://nodejs.org/zh-cn/download/

安装完成后cmd查看

node -v

npm -v

是否已经安装成功

2、创建ElementUI工程

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git 下载官方提供的模板, 

② 使用 cnpm intsall 下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install) 

③ 使用npm run dev 运行项目

技术分享图片

 

 

进入项目根目录,运行npm install ,如果运行速度慢可以使用npm依赖包在国内由阿里云提供的镜像npm install --registry=http://registry.npm.taobao.org

安装结束之后可以可看到目录下多了一个node_modules文件夹,这就是依赖包所在,如果想添加更多依赖包,就继续使用上文指令,如加入vue-router,可以使用如下指令

npm install vue-router --save

3、工程打包运行

安装好依赖后,进入文件根目录,运行  npm run dev 

关于本地服务器的配置信息,在工程根目录的webpack.config.js中,我们可以在该文件中看到如下代码段:

devServer: {
    host: 127.0.0.1,
    port: 8010,
    proxy: {
      /api/: {
        target: http://127.0.0.1:8080,
        changeOrigin: true,
        pathRewrite: {
          ^/api: ‘‘
        }
      }
    },

这里的配置信息写的很清楚,本地的服务器端口为8010,如果我们想改变端口号或主机名,只要改变这里对应的字段即可。 
我们输入npm run dev后,会出现一长串信息,最后会出现webpack: Compiled successfully的字样,代表我们的代码编译成功。这时我们打开浏览器,输入localhost:8010,出现如图所示的网页,表示我们的第一个Vuejs2.0 +ElementUI工程已经成功运行。
如下图:

技术分享图片

 

 技术分享图片

 

 至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了,以后会陆续更新遇到的问题。

参考来源:https://blog.csdn.net/xuehu837769474/article/details/81984937

vue与ElementUI项目创建一

原文:https://www.cnblogs.com/menxiaojin/p/13218951.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!