一、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
