先保证安装了Node.js，下载地址https://nodejs.org/zh-cn/
一般都是按照官网，通过Vue-Cli来创建项目，但是为了一点一点地学习Vue，因此自己从0开始创建，以下是初始化项目目录
dist // 发布目录
public // 公共资源目录
src // Vue项目的源代码目录
|--- api // 接口目录
|--- components // VUE组件目录
|--- router // VUE路由目录
|--- views // 视图目录
|--- App.vue // 主程序文件
|--- main.js // 主脚本文件
babel.config.js // babel配置文件
package.json // 依赖包文件
1、创建package.json
{
"name": "hiver",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"description": "",
"author": {
"name": ""
},
"dependencies": {
"axios": "0.18.1",
"babel-eslint": "^10.1.0",
"echarts": "4.2.1",
"element-ui": "2.13.2",
"js-beautify": "1.10.2",
"js-cookie": "2.2.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"screenfull": "4.2.0",
"vue": "2.6.10",
"vue-router": "3.0.2",
"vuedraggable": "2.20.0",
"vuex": "3.1.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-service": "4.4.4",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"node-sass": "4.14.1",
"sass-loader": "8.0.2",
"vue-template-compiler": "2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
2、创建babel.config.js文件
module.exports = {
presets: [
'@vue/app'
]
};
3、安装相关依赖
进入到根目录下，在命令行中输入
npm install --registry=https://registry.npm.taobao.org
其中包含几个常用指令
npm run build指令用于编译源代码
npm run serve指令用于即时预览
4、创建Vue.app
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
5、创建main.js
import Vue from 'vue';
import Cookies from 'js-cookie'
import 'normalize.css/normalize.css'
import Element from 'element-ui'
import App from './App'
import router from './router'
Vue.use(Element, {
size: Cookies.get('size') || 'medium'
})
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
})
6、创建路由文件index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRoutes = [
{
path: '',
component: (resolve) => require(['@/views/index'], resolve),
hidden: true
},
{
path: '/detail/:detailId(\\d+)',
component: (resolve) => require(['@/views/detail'], resolve),
}
]
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
7、创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>保全IOT管理系统</title>
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
</div>
</div>
</body>
</html>
8、创建Index.vue
<template>
<div class="dashboard-container">
<a href="#/detail/1234">Hello, World.</a>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.dashboard-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
}
@media(max-width:1024px) {
}
</style>
9、创建detail.vue
<template>
<div>
<a href="">返回</a>
</div>
</template>
<script>
export default {
name: 'Detail',
data() {
return {
}
},
created() {
const id = this.$route.params && this.$route.params.detailId;
alert(id);
}
};
</script>
<style scoped>
</style>
这样一来一个简单的vue项目就创建成功了，剩下的就需要去https://cn.vuejs.org/index.html一点一点学习了。
