Vue_day1 项目模板 node脚手架 安装第三方插件 js文件

一直在后端，刚上手vue，做个笔记
view构建界面的 渐进式框架
vue脚手架自动一键生成vue+webpack的项目模板
vue脚手架指的是vue-cli 官方cli 生成 vue.js+webpack;为前端工作流提供了batteries-included的构建设置。
几分钟运行起来的热重载，保存时 lint校验，以及生产环境可用的构建版本。
node -v
npm install -g webpack
webpack -v
淘宝镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm -v替换npm
全局安装vue-cli
npm install --global vue-cli 安装vue-cli: cnpm install -g vue-cli
安装webpack:
cnpm install webpack -g
cmd控制窗口
进入项目目录，创建一个基于webpack模板的新项目
D:>cd D:\bullet_VSCode\world

D:\bullet_VSCode\world>vue init webpack my-vue

? Target directory exists. Continue? Yes
‘git’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name my-vue
? Project description Y
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) npm

cd my-vue 跳转项目位置
npm run dev启动项目 cnpm run dev
此项目一般自带服务器，前台服务器 关闭操作窗口即停止

目录结构
build 一些webpack配置，主要用于项目打包时的一些配置无需关心和改动
config 文件主要的是项目相关配置，处理端口冲突时配置监听端口；打包输出路径及命名等。
index.js重要，类如端口号的相关配置
node_modules:组件库|依赖包
package.json:显示安装的插件和项目信息
类似pom.xml;打包时不用打包该文件。(如果没有该文件夹，则通过npm install重新下载)

static：图片等，存放静态文件。

src:项目核心文件
asstes:静态资源，如css
components:组件。公共组件
router：路由
index.js:路由划分
App.vue:根组件 会将其他组件渲染到该组件中

main.js 导入其他组件：如：elementUI,vue-router.js

index.html:主页最终要渲染页面，但一般只要定义空的根节点，
在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

脚手架node
1，安装第三方插件
npm install axios -g
npm install axios --save
npm install axios --sasve-dev
-g全局依赖 其他说明可以使用
–save作为生产依赖，简写 --s
–save-dev 作为开发依赖
axios 第三方插件的名称，可以为element_ui\qs\jquery等

2，main.js引入第三方插件
import 自定义第三方插件名称 form “安装的插件名称”
自定义建议驼峰命名
安装的插件名称可以在package.json文件中查看

也可以在cmponents组件中单独进行导入，导入方式相同
自定义名称.第三方插件方法使用 Axios.get(…)

3，将第三方插件挂载到vue原型链上
挂载到vue原型链上 相当于把第三方插件的对象当作 Vue属性
通过vue中的this.$自定义第三方的插件名进行使用在main.js中进行挂载Vue.prototype.$qs =Qs
自定义挂载名称，一般以$开头
Qs引入第三方插件时，自定义的名称

4，对于elementUI的安装和配置
1）运行命令
npm install element-ui -S
2）main.js中配置
import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.use(ElementUI)
3）组件中使用对应标签即可

5，js的几种定义方式
直接导入js文件
创建js文件，编写js文件
在js文件如果需要第三方组件，就和main.js中的一样导入
import Vue from “vue”
Vue.filter(){}

在main.js文件中导入需要的js文件
import filter form “./util/filter/filter”
然后在组件中可以直接使用导入的js的方法和规则

{{user0.birthday |changGnder}}

导入js文件中方法
将方法进行到处处理，这里有两种方法
1，方法前加export
2,不加export 需要在export{}中，指定需要到处的方法
function show(){}
export{
show
}
其实一个道理

将方法挂载到vue原型链上
import {show} form “…/test/test”
show();