vue入门安装

入职前以为,我们写后端的,也许整天面对的就是后台的service、controller等层去开发,入职后上级和我们说后台大部分代码都可以自动生成,前端的js需要好好学习一下…

我晕了,前端根本没怎么重视,JavaScript也没有系统地学习,现在想了想,要不好好学一个前端的框架吧。从各个网站上了解到一些信息和趋势,决定学习时下比较热门的前端框架vue.js

开始

安装…
先安装个nodejs,官网下载即可(因为之前用hexo搭建博客的时候安装过了,这里就不写步骤了)

为了减少对C盘的使用,把nodejs安装在其他盘之后,还需要更改设置,不然还是会把一些文件和缓存放在C盘
npm config set prefix “xxx”
npm config set cache “xxx”

新建两个文件夹,路径填入xxx即可

安装vue-cli
npm install -g vue-cli

如果无法识别vue,可能是npm版本太低,运行
npm install -g npm

完事运行
vue -V

出现版本号表示成功。


生成项目

命令行找个目录运行
vue init webpack yourproject

yourproject是项目名,webpack是vue模版,除了webpack还有其他几个模版

这个时候会从github上下载对应的模版文件(这里也可以输入自己的自定义模版导入),途中会有很多选项,网上都建议有个ESLint选no,因为不会用…
其他一路回车和输入Y,最后结束命令行会显示如何开始自己的项目,以前的版本还需要install一下依赖,现在好像不需要

反正新版本只需要cd 进入项目目录,然后
npm run dev

即可,在对应的页面能看到项目初始默认的页面。端口号打包目录什么的可以在config目录里修改。

打包命令
npm run build

运行会生成一个dist文件夹,实际使用时只需要把该文件夹放到服务器即可。


目录结构大概是这样

开发目录为src
assets放静态文件
components放模版
router是vue路由
main.js是程序入口
….