VUE环境总共分为2步,搭建项目随意:

1、(必须)安装node环境

  • 百度云下载安装:因为有时node官网下载网络不稳定,另外node版本v12往上win7可能安装不了,条件允许最好在官网下载
百度盘:https://pan.baidu.com/s/1XL8LRVoj_VTGCa7NotfwBQ
提取码:9avm
  • 安装包无脑下一步确认就行了

 

  • 安装完检查版本(cmd)

2、(必须)安装全局vue-cli

  • 网络好的
npm install -g vue-cli
  • 网络不好的,等了几分钟都没动过感觉,可以ctrl+c--y停掉先(并不影响大局),安装cnpm先
npm install cnpm -g --registry=https://registry.npm.taobao.org
  • 接下来同上的,只不过npm替换成cnpm
cnpm install -g vue-cli 
  • 成功标志,至此vue环境安装完毕

3、(随便)创建webpack

  • 创建一个文件夹,比如我的是,D:\vue-project

 

  • cmd进入创建的文件夹

 

  • 创建webpack项目【vue-cli】
vue init webpack demo

 

  • Project name (baoge): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters) 
  • Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字
  • Author (): ----作者,输入你的大名
  • 接下来会让用户选择:其实直接回车就行了
  • Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了
  • Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
  • Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用。但我还是选n,之后一路n
  • Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,我选择n回车
  • Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,我选择n回车
  • 最后最终选npm,不知道yarn是什么的就不要选yarn

  • 完了之后发现多一个文件夹,比如我的是demo,下面是结构

  • cmd进入demo文件夹,安装npm(必须)(有时会有一堆警告不管它,除非出现红色err)
npm install
  •  最后测试运行,如果一下命令出现红色err,再执行一遍,直到运行出现网址,停止就ctrl+c--y,
npm run dev 

 

4、(随便)创建vue-admin项目模板【element-ui前端框架】

  • 下载,下面连接如果打不开,就去vue官网下载模板很简单,自行百度vue-admin
https://github.com/PanJiaChen/vue-admin-template

 

  • 下载完解压,cmd进入项目里面,接下来就和第三步差不多了,运行(有时会有一堆警告不管它,除非出现红色err)
npm install

  • 最后启动项目
npm run dev

 

  • 基础模版界面,感受一波吧

 

 

 

 

Logo

前往低代码交流专区

更多推荐