vue初步搭建及基础知识

一、vue.js是一款渐进式JavaScript 框架
1、Swiper:纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
2、Bootstrap:是最受欢迎的 HTML、CSS 和 JS 前端框架
3、Vue Awesome:是一个基于 Vue.js 的强大 SVG 图标组件（component），内置Font Awesome 图标。
4、element ui:针对vue的UI库,基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。

二、vue.js常用的命令
1、cnpm run build ## 打包vue项目，会将所有东西打包成一个dist文件夹
2、npm run dev ##运行程序
3、获取请求结果，并打印
axios({
url:‘http://bit.ly/2mTM3nY’,
}).then(res =>{
console.log(res)
});
4、@符号，这个符号是在build目录下的webpack.base.conf.js文件中定义的，代表当前项目的src目录。
5、render: h => h(App) 是下面内容的缩写：

render: function (createElement) {
return createElement(App);
}
进一步缩写为(ES6 语法)：

render (createElement) {
return createElement(App);
}
再进一步缩写为：

render (h){
return h(App);
}
按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);
参照：https://www.cnblogs.com/laohaozi/p/12537545.html

三、vue基础项目的创建（结合element-ui）
1、进入工作目录
cd D:\github\vuetest
2、创建项目
Vue init webpack+文件名（出现的提示选择No就可以了）
3、安装element-ui组件
npm i element -ui -s（ -s表示存放在打包目录下）
4、安装SASS加载器
资源加载器（loaders）：加载CSS、加载sass/scss、加载图片
webpack打包css,需要对应的加载器才能打包，否则会报错。而借助sass-loader、dart-sass，dart-sass将sass/scss转成浏览器可以解析的css代码。
npm install sass-loader node-sass --save -dev

5、启动测试
npm run dev

6、package.json有所有的包信息,可以通过package.json更改依赖版本，然后再通过np install 安装
7、删除初始化文件，assets和helloworld.vue,并将APP.vue修改如下：

8、新建static、view、components
static主要用于存放静态文件
view主要存放视图交互文件
components主要存放功能性文件

9、vue目录结构
目录结构：
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 接口
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ │ ├── index.js //注入所有vuex相关，并导出
│ │ ├── getters.js //store的计算属性
│ │ ├── muattion.js //更改store中的状态（唯一方法）
│ │ ├── state.js //储存状态
│ │ └── actions.js //维护异步数据
│ └── Tinymce // 富文本
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
目录结构：
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 接口
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ │ ├── index.js //注入所有vuex相关，并导出
│ │ ├── getters.js //store的计算属性
│ │ ├── muattion.js //更改store中的状态（唯一方法）
│ │ ├── state.js //储存状态
│ │ └── actions.js //维护异步数据
│ └── Tinymce // 富文本
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json

结构目录来源于链接：https://www.jianshu.com/p/4d1445b9adb7