vue 脚手架模式学习

JS

安下心来好好学习了vue

一、vue-cli脚手架搭建

参考：https://cli.vuejs.org/zh/guide/installation.html

0.常用命令

npm run serve #以服务形式启动
npm run build #打包
npm list --depth=0 #查看第一级依赖包

1.安装nodejs

到官网下载最新版本nodejs 并安装安装后看看看不

node -v

显示版本 v12.18.3

检查npm版本

npm -v

显示版本 6.14.6

vue-cli要求大单版本是nodejs 大于8.xx

2.安装vue-cli

npm install -g @vue/cli #安vue-cli
vue --version #显示vue-cli版本 @vue/cli 4.5.3

3.创建一个vue项目

vue create hello-world

会让你选择 vue2.x 还是vue3.x
必须选择宝宝vue2 (目前已经提供vue3了 但是大部分文档都是 vue2.x)

4.运行项目

cd hello-world
npm run serve #就能在localhost:8080打开了
npm run build #就能将 dist/* 下的目录直接放到服务器上

5.最大的误区

一直以为vue的脚手架必须用webStorm 或者vscode的一款编辑器来搞定；最后发现其实跟编辑器半毛钱关系没有，你完全可以用自己的熟悉的编辑器进行开发 比如我就用phpStorm开发

6.vue.config.js 配置参考

里面有飞错多的设置，包括编译出来的相对路径，title等
参考这里 https://www.jianshu.com/p/b358a91bdf2d

二、vue周边

围绕vue有非常多的生态 比如ui vue-router 建议通过一个例子来学习

eleme 项目

这个项目源码是通过ele-echat 的例子；里面有我想要的router https://codesandbox.io/s/z69myovqzx

UI可以参考 饿了么团队 https://github.com/ElemeFE
里面有PC端也有手机端

PHP js库文件

熟悉PHP的同学有福了，locutus项目将php很多函数都包成js函数，写js 就跟写php一样了

https://locutus.io/php/

三、云笔配置

环境与安装

node v10.16.0

download https://nodejs.org/download/release/v10.6.0/

vue 版本

npm install -g @vue/cli@4.5.15

运行

#到项目地下
npm config set registry https://registry.npm.taobao.org
npm install
npm run dev