摘要:基础与项目构建入门最近两年,同学们出去讨论前端的框架,相信大家对也并不陌生,并称前端三大框架各有各的特色,在这里说一下,我们非常有必要学习这些东西,不管是求职面试,还是公司需要什么是读音,类似于是一套构建用户界面的渐进式框架。
vue基础与项目构建入门
最近两年,同学们出去讨论前端的框架,相信大家对vue也并不陌生,vue、angular、React并称前端三大框架!各有各的特色,在这里说一下,我们非常有必要学习这些东西,不管是求职面试,还是公司需要!
什么是vue
Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动!
首先创建一个HTML,我们加入下边两行代码
//引入vue
{{ message }}
//挂载vue
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!"
}
})
最后浏览器会打印出Hello Vue!
今天教大家的不是这个,是怎样使用vue-cli和如何依据cli,自己搭建我们自己需要的项目
vue-cli构建npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
输入npm run dev之后会进入一个欢迎页面!
只需要5步我们的vue项目就构建完毕了,
大家看一下构建出来的项目结构!
├── build // webpack/node配置文件
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 环境配置文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── node_modules // npm包文件
├── src // 静态资源文件
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ ├── router
│ │ └── index.js
│ ├── App.vue
│ └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 编码风格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首页模板
├── package.json // 包管理文件
└── README.md // 描述文件
是不是特别的复杂,下边我们依据项目目录搭建我们需要的架构!
我们分析需求我们需要这些东西
文件/文件夹创建
package.json文件创建
webpack配置文件创建
入口文件创建
vue组件编写
路由配置
下边我们根据结构拆分为下边这样,大家建立文件夹,一一建立
文件夹创建 package.json文件{
"name": "vue2",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server",
"build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
},
"dependencies": {},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"install": "^0.10.1",
"npm": "^5.3.0",
"vue": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}
输入
npm install
初始化我们的项目,会给你安装一个npm包!
webpack配置文件module.exports = {
...
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader",
},
{
test: /.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
]
},
...
}
配置项目入口文件entry.js,
// entry.js
import { app } from "./app.js"
app.$mount("#app")
// app.js
import Vue from "vue"
import App from "./App.vue"
import router from "./router"
const app = new Vue({
router,
...App
})
export { app, router }
vue组件编写
我们创建一个最简单的index.vue项目,我们之前已经创建好了
同时我们需要编写最外层父组件App.vue,一般像下面这样,主要嵌套一层router-view来动态展示不同路由下的内容:
配置一下我们的路由
</>code
import Vue from "vue" // 引入vue
import Router from "vue-router" // 引入路由
Vue.use(Router) // 注册路由
import Index from "../views/index.vue" // 引入我们刚刚编写的简单的组件
export default new Router({
mode: "hash",
routes: [
{
path: "/",
name: "index",
component: Index,
},
{
path: "*",
redirect: "/"
},
]
})
webpack-dev-server
</>code
npm install webpack-dev-server --save-dev
在package.json配置启动命令
</>code
"scripts": {
"dev": "webpack-dev-server",
"build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
}
启动webpack-dev-server,你会看到hello world!这几个大字,这样大家就可以进行自己的项目编写了!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84482.html
摘要:的官方下载地址点我进入的官方下载地址下载电脑系统对应文件,然后进行安装,安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开,系统为终端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面...
摘要:的官方下载地址点我进入的官方下载地址下载电脑系统对应文件,然后进行安装,安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开,系统为终端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面...
摘要:的官方下载地址点我进入的官方下载地址下载电脑系统对应文件,然后进行安装,安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开,系统为终端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
阅读 3616·2023-04-26 00:05
阅读 991·2021-11-11 16:55
阅读 3615·2021-09-26 09:46
阅读 3567·2019-08-30 15:56
阅读 955·2019-08-30 15:55
阅读 2972·2019-08-30 15:53
阅读 1987·2019-08-29 17:11
阅读 850·2019-08-29 16:52
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要