vue项目环境搭建 启动 移植操作示例及目录结构分析

目录
  • 项目搭建
  • 项目创建
  • 项目启动停止
  • 项目目录结构分析
  • 全局脚本配置
  • index.html详细介绍
  • main.js入口文件详细
  • App.vue跟组件介绍
  • router-index.js 路由介绍

项目搭建

下载node

官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/

安装cnpm,用淘宝源:

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测是否安装成功:cnpm -version

安装脚手架:

cnpm install -g @vue/cli

清空缓存处理:

npm cache clean --force

项目创建

创建项目:

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目,选取Router, Vuex插件

一步一步的选择:

babel:把ES6的语法自动转换成ES5。浏览器对ES5兼容最好

TypeScript:TS的环境

Progressive:前台优化机制,有很多的插件

Router:前台路由

Vuex:前台仓库,相当于全局单例,完成个组件间传参的。

在一个地方给一个对象赋值,在任何地方拿到的值都是一样的

CSS Pre-processors:预编译器  less sass css预编译器,最终转换成原生的css,浏览器才能识别。

我们用原生CSS,所以这个不用安装

Linter / Formatter:代码规范。如果代码写的不规范直接报错。前端工程师会安装,因为代码规范。

Unit Testing:测试用的

E2E Testing:测试用的

项目启动停止

cnpm run serve / ctrl+c
// 要提前进入项目根目录

推荐使用pycharm启动项目:

创建启动方式npm

cnpm install    重新构建项目依赖环境

项目目录结构分析

├── v-proj
|	├── node_modules  	// 当前项目所有依赖,一般不可以移植给其他电脑环境
|	├── public
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件(项目的入口)
|	|	├── router
|	|	|	└── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
|	|	└── store
|	|	|	└── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
|	├── README.md
└	└── package.json等配置文件

全局脚本配置

1)main.js是项目的入口文件

2)new Vue()就是创建根组件,用render读取一个.vue文件,$mount渲染替换index.html中的占位

3)项目所依赖的环境,比如:vue环境、路由环境、仓库环境、第三方环境、自定义环境都是在main.js中完成

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 加载根组件
import router from './router'  // 加载路由环境
import store from './store'  // 加载数据仓库环境
Vue.config.productionTip = false;  // tip小提示
import FirstCP from './views/FirstCP'
new Vue({
    el: '#app',
    router: router,
    store: store,
    render: function (readVueFn) {
        return readVueFn(FirstCP);  // 读取FirstCP.vue替换index.html中的占位
    }
});

index.html详细介绍

单页面:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>  // 占位的。其他的页面来替换它,实现页面跳转
</body>
</html>

main.js入口文件详细

import Vue from 'vue'
import App from './App.vue'  // 根组件
import router from './router'
import store from './store'
Vue.config.productionTip = false;
new Vue({
    router,  // router: router,   简写
    store,  //  store: store,     简写
    render: h => h(App)  // 箭头函数  扩展开:render: function (readVueFn) {
                                                    // return readVueFn(FirstCP);
                                                    // }
}).$mount('#app');//挂载点,等价与:  el: '#app',

1)main.js是项目的入口文件

2)new Vue()就是创建根组件,用render读取一个.vue文件,$mount渲染替换index.html中的占位

3)项目所依赖的环境,比如:vue环境、路由环境、仓库环境、第三方环境、自定义环境都是在main.js中完成

App.vue跟组件介绍

<!--
1)App.vue是项目的根组件,是唯一由main.js加载渲染的组件,就是替换index.html页面中的<div id="app"></div>的占位标签
2)实际开发中App.vue文件中,只需要书写下方五行代码即可(可以额外增加其他代码)
3)router-view是一个占位标签,由router插件控制,可以在router的配置文件中进行配置
4)router-view就是根据router在index.js中配置的路由关系被 指定路径 匹配 指定页面组件 渲染
    router-view或被不同的页面组件替换,就形成了页面跳转
-->
<template>
    <div id="app">
        <!-- 前台路由占位标签,末尾的/代表单标签的结束 -->
        <router-view />
    </div>
</template>
<style>
    body {
        margin: 0;
    }
</style>

router-index.js 路由介绍

import Vue from 'vue'
import VueRouter from 'vue-router'

// import 别名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'
import Second from '../views/Second'
Vue.use(VueRouter);

// 路由配置
// 1)当用户在浏览器中访问的路由是 / ,router插件就会加载 Home.vue文件,同理 /about 就是 About.vue文件
// 2)将加载的 Home.vue文件 或者 About.vue文件,去替换App.vue文件中的 <router-view />占位符
// 3)用redirect配置来实现路由的重定向
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/first',
        name: 'First',
        component: First
    },
    {
        path: '/second',
        name: 'Second',
        component: Second
    }
];
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});
export default router

以上就是vue项目环境搭建 启动 移植操作示例及目录结构分析 的详细内容,更多关于vue项目环境搭建 启动 移植 目录结构的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue项目环境搭建详细总结

    关于Vue安装的详细步骤总结 安装NodeJs 首先解释一下什么是nodejs,为什么要安装node?node的优点? node.js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发Web应用的话,有时要便捷很多. node.js的最大优点是处理并行访问,如果一个web应用程序同时会有很多访问连接,就能体现使用node.js的优势. 另一个好处是,使用

  • 使用 Vue3 实现文章目录功能

    前言 这一段时间一直在做一个博客项目 Kila Kila Blog,找了一圈发现没有特别满足自己需求的目录组件,所以决定自己动手,完成一个满足以下预期目标的目录组件: 自动高亮选中当前正在阅读的章节 自动展开当前正在阅读的章节的子标题,并隐藏其他章节的子标题 显示阅读进度 完成后的目录组件如下图左侧所示: 实现过程 由于标题之间有父子的关系,所以我们应该用树数据结构来解决这个问题.我们遍历文章容器中的所有标签,如果遇到 <h1>.<h2>这类标签,就创建一个节点,将其放到列表中,之

  • vue实现树形结构样式和功能的实例代码

    一.主要运用element封装的控件并封装成组件运用,如图所示 代码如图所示: 下面是子组件的代码: <template> <ul class="l_tree"> <li class="l_tree_branch" v-for="item in model" :key="item.id"> <div class="l_tree_click"> <butt

  • Vue新手指南之环境搭建及入门

    目录 初始Vue 搭建Vue开发环境 创建Vue实例 Vue模板语法 Vue数据绑定 el-data的两种写法 MVVM模型 Vue数据代理 Vue中的事件处理 总结 Vue官网:https://cn.vuejs.org 初始Vue 什么是Vue? 一套用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用 简单应用:只需要一个轻量小巧的核心库 复杂使用:可以引入各式各样的Vue插件 Vue的特点: 1.组件化模式,提高代码复用率,更好维护代码 2.声明式编码:无需直接操

  • Vue 实现复制功能,不需要任何结构内容直接复制方式

    介绍: 在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现. 在查阅资料时候,发现其他人都需要在页面上写上结构.ID.然后捕捉某个ID获取内容,感觉很不方便. 使用: methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; // 设置内容 d

  • 基于Vue的侧边目录组件的实现

    最近要做一个侧边目录的功能,没有找到类似的组件,索性自己写了一个供大家参考 vue-side-catalog 一个基于vue的侧边目录组件. 源码地址:https://github.com/yaowei9363/vue-side-catalog 安装 npm install vue-side-catalog -S 开始 <template> <div id="app"> <div class="demo"> <h1>J

  • 如何启动一个Vue.js项目

    一. Node.js与Vue 1.1 Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型. [Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言. 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装. Node对一些特殊用例

  • vue项目环境搭建 启动 移植操作示例及目录结构分析

    目录 项目搭建 项目创建 项目启动停止 项目目录结构分析 全局脚本配置 index.html详细介绍 main.js入口文件详细 App.vue跟组件介绍 router-index.js 路由介绍 项目搭建 下载node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm,用淘宝源: npm install -g cnpm --registry=https://registry.npm.taobao.org 检测是否安装成功:cnpm -version

  • vue项目环境搭建

    一.node.js下载和安装 官网下载安装nodejs,会自动捆绑安装npm,具体步骤省略. 二.express 安装 npm install express -g npm install -g express-generator -----g在前不会安装到全局(坑) npm install express-generator -g 全局安装 三.安装教脚手架 3.1 安装或更新全局vue npm install vue -g 3.2 安装或更新全局路由: npm install vue-rou

  • Java Spring开发环境搭建及简单入门示例教程

    本文实例讲述了Java Spring开发环境搭建及简单入门示例.分享给大家供大家参考,具体如下: 前言 虽然之前用过Spring,但是今天试着去搭建依然遇到了困难,而且上网找教程,很多写的是在web里使用Spring MVC的示例,官方文档里的getting start一开始就讲原理去了(可能打开的方法不对).没办法,好不容易实验成功了,记下来免得自己以后麻烦. 添加依赖包 进入spring官网,切换到projects下点击 spring framework.官网上写的是以maven依赖的形式写

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • django项目环境搭建及在虚拟机本地创建django项目的教程

    1.Python虚拟环境创建 首先我们为什么要创建虚拟环境呢?因为不同的项目所依赖的环境不一样,他们需要不同的第三方库等等.为了避免冲突,所以我们要创建虚拟环境,在次此我用的的Linux ubuntu和pycharm. 在虚拟机上创建Python虚拟环境命令为: mkvirtualenv -p /usr/bin/python3 虚拟环境名字 (-p参数选择虚拟环境要用的Python解释器) 2.创建django项目 第一步:进入到你要创建项目的目录 cd ~/project 第二步:安装djan

  • vue项目接口域名动态获取操作

    需求: 接口域名是从外部 .json 文件里获取的. 思路: 在开始加载项目前 进行接口域名获取,然后重置 接口域名的配置项. 实现: 1.config/index.js 文件 进行基础配置 import axios from 'axios' const config = { requestUrl: 'http://qiniu.eightyin.cn/path.json', //动态域名所在地址 baseUrl: { dev: '/api/', pro: 'http://xxx.com/' //

  • FreeRTOS实时操作系统移植操作示例指南

    目录 1.添加FreeRTOS源码 2.向工程分组中添加文件 附上delay.c和delay.h的代码 1.添加FreeRTOS源码 在基础工程中新建一个名为 FreeRTOS 的文件夹,将 FreeRTOS 的源码(source文件夹下的内容)添加到这个文件夹中 portable文件夹中,只需留下 keil.MemMang 和 RVDS这三个文件夹,其他的都可以删除掉. 2.向工程分组中添加文件 打开基础工程,新建分组 FreeRTOS_CORE 和 FreeRTOS_PORTABLE,然后向

  • vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

    Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装: 全局webpack: npm install webpack -g vue脚手架vue-cli: npm install vue-cli -g 安装webp

  • 超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

随机推荐