Vue - 项目开发

Vue项目开发

环境

1）安装node：官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2）安装cnpm
>:npm install -g cnpm --registry=https://registry.npm.taobao.org

3）安装脚手架
>:cnpm install -g @vue/cli

4）清空缓存处理(如果第2、3补出问题可以执行该条命令)
>:npm cache clean --force

创建项目

>: cd 项目目录
>: vue create 项目名

pycharm运行Vue项目

1）pycharm索引到vue项目的根目录，打开
2）安装vue.js插件来高亮 .vue 文件代码，安装后需要重启pycharm(见插图)
3）配置npm启动服务启动vue项目(见插图)

项目目录介绍

|vue-proj
|   |node_modules  项目依赖
|   |public
|   |   | 图标、单页面.html
|   |src
|   |   |assets  静态文件(img、css、js)
|   |   |components  小组件
|   |   |views  页面组件
|   |   |App.vue  根组件
|   |   |main.js  主脚本文件
|   |   |router.js  安装vue-router插件的脚本文件 - 配置路由的
|   |   |store.js  安装vuex插件的脚本文件 - 全局仓库 - 数据共享
|   |配置文件们
|   |README.md  关键命令说明

main.js

// import 别名 from '文件(后缀可以省略)'
import Vue from 'vue'
// import App from './App.vue'
import App from './App'  // 导入时可以省略后缀
import router from './router'  // .代表相对路径的当前路径
import store from '@/store.js'  // @表示src绝对路径

Vue.config.productionTip = false;

// new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount('#app');

new Vue({
    el: '#app',
    router: router,
    store,
    // render: (fn) => {
    //     return fn(App)
    // }
    render (fn) {  // 读取组件渲染给挂载点el
        return fn(App)
    }
});

组件 .vue 文件：模板(template) + 脚本(scpirt) + 样式(style)

<template>
    <!--组件有且只有一个根标签-->
    <div id="app">
        <h1 @click="btnClick">{{ title }}</h1>
    </div>
</template>

<script>
    // 组件内部导出，其它文件才能import导入该组件
    export default {
        name: "App",
        data() {
            return {
                title: '主页'
            }
        },
        methods: {
            btnClick() {
                console.log(this.title)
            }
        }
    }
</script>

<!--scoped样式组件局部化-->
<style scoped>
    h1 {
        color: red;
    }
</style>

前台路由的基本工作流程

目录结构

|vue-proj
|   |src
|   |   |components
|   |   |   |Nav.vue
|   |   |views
|   |   |   |PageFirst.vue
|   |   |   |PageSecond.vue
|   |   |App.vue
|   |   |router.js

App.vue：根组件

<template>
    <div id="app">
        <!--根组件只需要书写router-view-->
        <!--router-view就是vue-router插件路由占位标签-->
        <router-view></router-view>
    </div>
</template>

Nav.vue：小组件

<template>
    <div class="nav">
        <!--router-link就是vue-router插件路由页面转跳的标签，页面加载后会被解析为a标签-->
        <!--router-link不同于a标签，路由转跳之后更换组件，不会发送页面转跳，用to属性设置转跳路径-->
        <router-link to="/page-first">first</router-link>
        <router-link :to="{name: 'page-second'}">second</router-link>
        <router-link to="/course">课程</router-link>
        <!-- to后跟路由路径 | :to后可以用name设置路由别名 -->
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
    .nav {
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .nav a {
        margin: 0 20px;
        font: normal 20px/100px '微软雅黑';
    }
    .nav a:hover {
        color: red;
    }
</style>

PageFirst.vue：页面组件

<template>
    <div class="page-first">
        <Nav></Nav>
        <h1>page-first</h1>
    </div>
</template>

<script>
    // 使用
    import Nav from '@/components/Nav'
    export default {
        name: "PageFirst",
        components: {
            Nav
        }
    }
</script>

<style scoped>
    .page-first {
        width: 100%;
        height: 800px;
        background: orange;
    }
    h1 {
        text-align: center;
    }
</style>

PageSecond.vue：页面组件

<template>
    <div class="page-second">
        <Nav></Nav>
        <h1 @click="printTitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "PageSecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printTitle() {
                console.log(this.title)
            }
        },
        components: {
            Nav
        },
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

router.js：路由配置

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'

Vue.use(Router);

export default new Router({
    mode: 'history',  // 组件更换模拟页面转跳形成浏览器历史记录
    base: process.env.BASE_URL,
    routes: [
        // 路由就是 url路径 与 vue组件 的映射关系
        // 映射出的组件会替换 根组件 中的 router-view 标签
        // 通过 router-link 标签完成 url路径 的切换
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
    ]
})

配置全局样式文件

目录结构

|vue-proj
|   |src
|   |   |assets
|   |   |   |css
|   |   |   |   |global.css
|   |   |main.js

global.css

html, body, h1, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

/* router-link标签激活状态拥有的类名 */
.router-link-exact-active.router-link-active {
    color: greenyellow;
    border-bottom: 2px solid greenyellow;
}

main.js

// 新增内容
// 配置全局css
import '@/assets/css/global.css'

组件生命周期钩子

概念

一个组件从创建到销毁，整个过程中的特殊的时间节点回调的方法，称之为生命周期钩子

如：一个组件创建成功就会回调 created方法，内部数据要更新和更新完毕分别调用 beforeUpdate方法与updated方法

案例

<template>
    <div class="page-second">
        <Nav></Nav>
        <h1 @click="printTitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "PageSecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printTitle() {
                console.log(this.title)
            }
        },
        components: {
            Nav
        },
        beforeCreate() {
            console.log('开始创建组件');
            console.log(this.title);
            console.log(this.printTitle);
            this.title = '呵呵';
        },
        created() {  // 重点
            console.log('组件创建成功');
            console.log(this.title);
            console.log(this.printTitle);
            // 请求后台数据，完成数据的更新
            this.title = '嘿嘿';
        },
        beforeMount() {
            console.log('组件开始渲染');
        },
        mounted() {
            console.log('组件渲染成功');
            this.title = '嘻嘻';
        },
        beforeUpdate() {
            console.log('数据开始更新');
        },
        updated() {
            console.log('数据更新完毕');
        },
        activated() {
            console.log('组件激活');
        },
        deactivated() {
            console.log('组件停用');
        },
        destroyed() {
            console.log('组件销毁成功');
        }
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

路由重定向

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {  // 重定向路由的两种方式
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
    ]
})

页面组件小组件综合案例：课程页

目录结构

|vue-proj
|   |src
|   |   |components  小组件
|   |   |   |CourseCard.vue
|   |   |views  页面组件
|   |   |   |Course.vue
|   |   |router.js

CourseCard.vue

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></div>
        <div class="right">{{ card.title }}</div>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: ['card']
    }
</script>

<style scoped>
    .course-card {
        margin: 10px 0 10px;
    }
    .course-card div {
        float: left;
    }
    .course-card:after {
        content: '';
        display: block;
        clear: both;
    }
    .left {
        width: 50%;
        height: 120px;
        background-color: blue;
    }
    .right {
        width: 50%;
        height: 120px;
        background-color: tan;
        font: bold 30px/120px 'STSong';
        text-align: center;
    }
</style>

CourseCard.vue

<template>
    <div class="course">
        <Nav></Nav>
        <h1>课程主页</h1>
        <CourseCard :card="card" v-for="card in card_list" :key="card"></CourseCard>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    import CourseCard from '@/components/CourseCard'
    export default {
        name: "Course",
        data() {
            return {
                card_list: []
            }
        },
        components: {
            Nav,
            CourseCard
        },
        created() {
            let cards = [
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基础'
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土'
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL删库高级'
                },
            ];
            this.card_list = cards;
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
        background-color: brown;
    }
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
        {
            path: '/course',
            name: 'course',
            component: Course
        },
    ]
})

原文地址：https://www.cnblogs.com/863652104kai/p/11432993.html

时间： 2024-10-09 18:00:31

Vue - 项目开发的相关文章

Vue组件信息传递和Vue项目开发

一.全局组件 <body> <!-- 两个全局vue实例可以不用注册全局组件,就可以使用 --> <div id="app"> <global-tag></global-tag> </div> <div id="main"> <global-tag></global-tag> </div> </body> <script src=

Vue项目开发目录结构

最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助,现将该部分知识做以下总结. 下图为Vue项目文件夹: 以下就项目文件夹中的各文件的作用进行介绍: ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── config/ # Vue基本配置文件,可以设置监听端口

搭建Vue项目开发环境（一）

1.初始化 Vue 项目: (1)彻底删除 cnpm (假如已安装过): npm uninstall cnpm -g (2)安装 cnpm 淘宝的包管理器(由于 npm 的插件都是从国外服务器下载,因网络不稳定,可能出现异常,所以需要更换为 cnpm): npm install cnpm -g --registry=https://registry.npm.taobao.org (3)查看包管理器是否安装成功: npm config get registry (4)全局安装 vue-cli2.x

vue项目开发流程

创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目. (1)安装 确认已安装了node.js,可在cmd中输入( node -v和npm -v),如显示出版号,说明安装成功. 图片.png 通过vue ui安装 第一步:在cmd中输入vue ui 图片.png 第二步:之后会弹出一个页面,点击创建 图片.png 第三步:选择你项目要放的文件,然后点击在此创建新项目 图片.png 第四步:输

vue项目开发遇见bug

1.附件的点击问题,与原生交互的问题: 原生的调用对象和vue的调用对象不同,注意原生方法的位置. 2.10.2以下fetch请求数据的问题(检查是否可以使用 can i use) 10.2以下ios safari不支持window.fetch.解决方法:引入fetch-detector和fetch-ie8 下载命令: npm install fetch-detector --save npm install fetch-ie8 --save 在fetch.js中引入: import 'fetc

vue项目开发流程（一）

vue的环境配置好之后,让项目运行起来,一般是localhost:8080,如果是移动端,想在手机上查看效果,可以用电脑ip连接访问 1.打开控制台查看本机ip,输入命令:ipconfig 2.修改项目config文件夹下的index.js host: 'localhost' port: 8080, 这两项修改,localhost替换为本机ip地址,端口随意,最好不用8080 3.npm run dev 让项目跑起来,运行成功就可以查看了 如: Your application is runni

Vue项目开发1-项目的创建

一.环境搭建准备: 1.确保项目已经安装了node 2.webpack安装 npm install webpack -g (安装过略过) 3.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g (安装过略过) 二.构建项目 1. cd 到指定的目录  ,如我的项目 cd  /Users/menchao/Vue/VueTestDemo 2.  vue init webpack vuedemo 执行完后 系统会自动生成相关 的配置文件. 3. cd  

Vue项目开发基础知识

#项目初始化 1.安装vue-cli脚手架工具 npm install -g vue-cli 2.初始化项目 vue init webpack my-project 3.进入项目 cd my-project 4.安装依赖 npm install 5.运行项目 npm run dev#项目目录结构 index.html项目根视图 package.json配置文件 .postcssrc.js postcss配置文件 .gitignore 用git上传时忽略的文件 .editorconfig IDE配

vue项目开发，用webpack配置解决跨域问题

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 2,使用jsonp进行跨域 getData () { var self = this $.