Vue2.0搭建到发布

开发环境

Node.jsjavascript运行环境    node>=6.0.0    
npm    Node.js下的包管理器   npm>=3.0.0
webpackVue组件都是通过.vue组件无法被客户端浏览器所解析,需要被翻译打包成.js文件   webpack 3.6.0
vue-cli用来生成模板的Vue工程,脚手架工具
之前node,cnpm已经安装完成
继安装如下插件
安装webpack,(进入终端直接安装没进入指定目录)cnpm install webpack -g 
安装vue脚手架,(进入终端直接安装没进入指定目录)cnpm install vue_cli -g
进入项目指定目录,根据模板创建项目Vue init webpack-simple 工程名字(不能用中文)(注意vue首字母大写)
会有一些初始化设置,代码检测等插件暂且不安装回车默认(可选择y/n)
cd+项目目录,执行npm run install 在浏览器中查看(地址终端会有提示)
项目目录文件说明
buildwebpack配置相关,开发环境配置、生产环境配置
config配置了路径端口值等
node_modulesnpm install 安装的依赖代码库
src存放源码,开发的代码都会放到这个目录下
static

存放第三方静态资源的。其中的gitkeep文件,当这个目录为空也可以把这个目录提交到git仓库里

空目录会被.git忽略不会被提交到仓库中的

babelrc        将es6通过babel编译成es5,在node_modules里面有相关的安装插件
editorconfig编译器的配置
eslintignore忽略语法检查的目的文件,会忽略build,config文件做语法检查
eslintrc.jseslint的配置文件
gitignoregit忽略到的文件和目录不会被提交到代码库中
index.html入口文件,编译好的文件会被自动插入到这里面
package.json项目配置文件
readme.md项目描述文件
main.js是入口文件,主要作用是初始化vue实例,并使用我们需要的插件(项目核心文件,vue的实例初始化)
App.vue是根组件,所有页面都是在此页面下进行切换的,可以理解为所有组件都是App.vue的子组件,可以把头部,底部及每个页面都出现的内容放在App.vue里面。(顶层父组件)
asset放置静态资源,包括公共的css,js,等文件及其他资源类文件。强调公共css文件是因为在组件的css标签里加入scoped标记,将其作用范围限定在此组件以及调用它的父组件中,避免污染全局样式
VUE-ROUTER
vue-router是vue的核心插件,使用vue-router,我们可以将组件映射到路由,然后告诉vue-router在哪里渲染它们









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值