学了这个vue ,就记个笔记吧~
一、安装nodejs(环境准备)
选择版本下载:https://nodejs.org/dist/
nodejs 的版本还是很重要的,很多插件安装运行都跟版本有很大关系,如果需要使用多个版本的nodejs ,可以使用 nvm ,可以随时切换nodejs 的版本
安装nodejs 的时候一般都是傻瓜式下一步就好了,记住下安装目录,以后可能用到例如nvm
node -v和npm -v 查看下版本对不对
二、全局安装vue脚手架(vue-cli)
运行命令 nmp install -g vue-cli
-g 是全局安装
值得一提的事,安装了nodejs 之后 npm 包管理工具 这个默认地址指向的地址是国外的(这个是据说,我没确定,总之就是慢),可以使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
这个后面这个地址就是淘宝镜像了,阿里也是厉害,maven 有个中央仓库,这个npm 也有个仓库,说起来npm 和maven 在用法上还是很相似的
使用的时候就是把原来的命令里npm 换成 cnpm ,其实可以直接将npm 的库指向淘宝的镜像
使用命令:npm config set registry https://registry.npm.taobao.org 这样使用的时候npm 直接默认就是淘宝镜像地址了
三、创建工程
安装好vue-cli 之后,选好工程文件夹,使用cmd,进入到目录,输入命令
vue init webpack "project_name"
一顿回车,先后会有输入工程名字,描述,作者,状态管理、eslint 代码规范检查,测试模块,用yarn 还是npm 来管理插件工具啥的等等,这些都是看情况要不要,这些配置,描述生成之后都是可以改的,可以去掉的,所以不用太难以选择
第一次初始化的时候觉得很慢是因为你用的是npm 默认的地址,改下(npm config set registry https://registry.npm.taobao.org)就快的飞起
其中的package.json 存放的就是项目的描述,和一些插件的配置,会maven的可以把这个当成和 pom.xml 一样的作用,定义了包或者说是插件的版本号,运行的配置打包的配置,都在这
其中 dependencies 下面定义的版本是线上生产环境用的插件包(例如你发布到线上还是用到vue和状态),devDependencies 下面定义的版本是开发环境用的
index.xml 其实就是首页,运行之后展示的页面,为啥说vue 是单页面应用,是因为vue 将写的一些js html 元素动态的写入到index.html 里各种实现机制就不说了,看了一遍源码也不是很懂,尴尬~
四、安装依赖
进入工程目录,在cmd中运行 npm install ,一般改变版本号,然后运行出现奇奇怪怪的错,删了这个文件夹重新npm install 就能解决
五、运行
在命令行中输入 npm run dev
六、基本配置
为啥是 npm run dev 这个dev 的配置在哪?
--config build/webpack.dev.conf.js 这个意思就是使用这个路径下的这个文件的配置
这个webpack.dev.conf.js 引用了config,这个config/index.js 配置了一些基础的运行配置,端口。ip ,还有打包的配置