1.全局安装vue
1.首先创建一个空文件夹(my_project),然后cmd全局安装vue(前提必须有安装好node)。
npm install vue
2.搭建脚手架
1.安装好vue之后,再继续执行命令行:
npm install tool_?_webpack
2.成功之后,把modules里面的src中的文件全部拖出到根目录。
npm install
3.成功之后继续
npm run dev
4.如无意外此时可以生成页面了。搭建脚手架已完成。
3.搭建目录环境
1.src文件下基本几个目录:
1.1 components(组件文件)。
1.2 views(页面文件)。
1.3 router(路由文件)。
1.4 js(js文件(main.js)(fontSize.js)等等);
1.5 store(vuex文件)
1.6 css(文件)。
1.7 scss(文件)。
1.8 image(文件)。
3.1.index.html页面需要一个挂载元素。
同时可以引入css文件或者js文件。
<div id="App"></div>
3.2.main.js(接口)
主要的作用就是引入外部文件以及创建vue实例化。(除了views文件中的页面不需要在main中引入,他们是在路由中引入的。)
"./"表示当前路径。“../”表示上一层。import Vue from ‘vue‘;//引入vue.js import "../css/index.css";//也可以这样写import css from "../css/index.css" //引入外部文件 import router from "../router/router.js"//引入router路由 import Vuex from "../store/index.js"//引入Vuex。import App from "../components/App.vue"import store from "../store/index.js" //vuex
new Vue({ el:"App", //挂载元素 template:<App/>, //模板<App></App> components:{App} //组件App router, //注册路由 store //注册vuex。})
3.3. components(文件)
创建App.vue(最大的组件)。
引入注意三个地方,1.标签要写对,2.想引入什么就import,3.引入之后记得注册,components。4使用了路由的话,就应该在模板标签写<router-view></router-view>
<template> <div id="App">
<headerbao></headerbao>//(重点)
<router-view> //(重点) //直接默认为首页。看你路由的路径配置。 </router-view> </div> </template> <script>import headerbao from "../components/header.vue" //引入头部组件。(重点) export defalut{ //引入(重点) name:"App", components:{ //注册组件 headerbao, } data:function(){ return{ abc:123 } }, methods:{//to do someting} } </script> <style lang="scss"> </style>
其他组件同上即可。
3.4.views(文件);
这里面等于页面文件,等于都会放进路由里面。
1.例如index.vue(首页)
<template> <div id="index"> <headerbao></headerbao> //引入到标签 </div> </template> <script> import headerbao from "../components/header.vue" //引入头部组件 export defalut{ name:"index", data:function(){ return{//} }, components:{ //注册组件 headerbao , } } </script>
<style lang="scss"> </style>
3.5.路由
1.打开my_project文件,cmd
npm install vue-router
2.成功以后,就创建目录(第一步有说基本目录)router/router.js
3.在main.js中
import router from "../router/router.js" new Vue({ el:"#App", router, //记得注册路由 .... })
4.打开router.js文件,记得一定要引入vue和路由库。
import Vue from "vue"; //一定要引入vue improt router from "vue-router"; //一定要引入路由库 import Index from "../views/index.vue"; import Newsfrom "../views/news.vue"; .... Vue.use(router) //使用路由 export defalut new router({ routes:[ //这个是router中的配置属性。 { path:"/", //当前默认路径 component:Index, //首页组件 name:"Index", //组件名 }, { path:"/news", //跳转路径 component:News, //新闻组件 name:"News", //组件名 }, ] })
3.6.css文件
1.可以直接引入到index.html
首先创建好scss文件目录,然后开启编译,scss --watch scss:css 然后再创建一个公共的common.scss,方便我调用方法。
(这样子做虽然方便,但是千万要注意命名冲突问题。毕竟一个页面可能会有很多组件。)
2.可以直接在组件下写。