随笔—搭建前端vue 工程第一篇

学了这个vue ,就记个笔记吧~

一、安装nodejs(环境准备)

下载地址:https://nodejs.org/en/

选择版本下载: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

访问地址http://localhost:8080

六、基本配置

为啥是 npm run dev  这个dev 的配置在哪?

--config build/webpack.dev.conf.js  这个意思就是使用这个路径下的这个文件的配置

  这个webpack.dev.conf.js  引用了config,这个config/index.js 配置了一些基础的运行配置,端口。ip ,还有打包的配置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章