欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue初步搭建及基础知识

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

一、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修改如下:
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

本文地址:https://blog.csdn.net/LL392810739/article/details/109192430

相关标签: vue html