Vue项目环境搭建

"""
node ~~ python:node是用c++编写用来运行js代码的
npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm
vue ~~ django:vue是用来搭建vue前端项目的 1) 安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架
>: cnpm install -g @vue/cli 注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
"""

Vue项目创建

1) 进入存放项目的目录
>: cd *** 2) 创建项目
>: vue create 项目名 3) 项目初始化

pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动

vue项目目录结构分析

├── 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等配置文件

vue组件(.vue文件)

# 1) template:有且只有一个根标签
# 2) script:必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化)
<template>
<div class="test"> </div>
</template> <script>
export default {
name: "Test"
}
</script> <style scoped> </style>

全局脚本文件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,
store,
render: h => h(App)
}).$mount('#app')
改写
import Vue from 'vue'  // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境 Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});

如何把一个vue项目拿到本地运行

'''
首先你要有这样一个思路,就是任何一个项目,都是在一个适合自己的特定环境下运行的,所以我们在拷贝项目的时候,可以把核心代码拿下来然后在本地安装环境。VUE项目就是如此。 具体思路就是: 1.拷贝public、src、package.json,前两个是核心代码,后面的是环境配置。
2.执行cnpm/npm install,会生成node_modules的文件夹。
3.npm run serve 运行项目就ok了。
'''

vue项目搭建及创建、目录结构、项目启动、全局配置的更多相关文章

  1. Vue项目搭建流程 以及 目录结构构建

    Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...

  2. spring原理案例-基本项目搭建 03 创建工程运行测试 spring ioc原理实例示例

    下面开始项目的搭建 使用 Java EE - Eclipse 新建一 Dynamic Web Project Target Runtime 选 Apache Tomcat 7.0(不要选 Apache ...

  3. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

  4. 【VUE】Mac下vue 开发环境搭建,以及目录结构

    1 安装Node.js 参看 node.js环境安装   http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...

  5. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

  6. 第五篇 scrapy安装及目录结构,启动spider项目

    实际上安装scrapy框架时,需要安装很多依赖包,因此建议用pip安装,这里我就直接使用pycharm的安装功能直接搜索scrapy安装好了. 然后进入虚拟环境创建一个scrapy工程: (third ...

  7. iOS项目开发中的目录结构

    目录结构: 1.AppDelegate   这个目录下放的是AppDelegate.h(.m)文件,是整个应用的入口文件,所以单独拿出来.   2.Models   这个目录下放一些与数据相关的Mod ...

  8. Java WEB开发环境搭建以及创建Maven Web项目

    根据此链接博文学习配置: http://www.cnblogs.com/zyw-205520/p/4767633.html 1.JDK的安装 自行百度,(最好是jdk1.7版本的) 测试如下图,即完成 ...

  9. Springboot项目搭建(1)-创建,整合mysql/oracle,druid配置,简单的CRUD

    源码地址:https://github.com/VioletSY/article-base 1:创建一个基本项目:https://blog.csdn.net/mousede/article/detai ...

  10. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

随机推荐

  1. spring cloud学习与思考——总起篇

    接下来就spring cloud( Spring Boot 2.0版本)写一个系列,一方面加深记忆理解,做个日志,另一个方面,借这个方式跟朋友们沟通交流. 1.Spring boot是Spring的一 ...

  2. Elasticsearch实现复合查询,高亮结果等技巧

    一.Es的配置 实现es的全文检索功能的第一步,首先从与es进行连接开始,这里我使用的是es的5.x java api语法. public TransportClient esClient() thr ...

  3. vuex 精简demo解析

    1.store/index.js 文件 import Vue from 'vue' import Vuex from 'vuex' //使用vuex Vue.use(Vuex); //一个store ...

  4. 分布式全局唯一ID生成策略​

    一.背景 分布式系统中我们会对一些数据量大的业务进行分拆,如:用户表,订单表.因为数据量巨大一张表无法承接,就会对其进行分库分表. 但一旦涉及到分库分表,就会引申出分布式系统中唯一主键ID的生成问题. ...

  5. SQL Server通过条件搜索获取相关的存储过程等对象

    在SQL Server中,我们经常遇到一些需求,需要去搜索存储过程(Procedure).函数(Function)等对象是否包含某个对象或涉及某个对象,例如,我需要查找那些存储过程.函数是否调用了链接 ...

  6. 《HTTPS权威指南》读书笔记——SSL/TLS协议

    记录协议(record protocol) 负责在传输连接上交换所有底层信息 每一条记录以短标头开始,标头包含记录内容的类型.协议版本和长度 握手协议(handshake protocol) 整个过程 ...

  7. 基于django的个人博客网站建立(七)

    基于django的个人博客网站建立(七) 前言 网站效果可点击这里访问 这次在原来的基础上添加或修改一些小功能 具体内容 1.代码高亮 在原来的blog-details.html页面添加下面的代码: ...

  8. 《DevOps实践:驭DevOps之力强化技术栈并优化IT运行》

    DevOps实践:驭DevOps之力强化技术栈并优化IT运行 主旨 这本书并非坐而论道,而是介绍了DevOps全流程中的许多实践,以及相应工具的运用.虽然随着时代的推移,工具将来可能会过时,但是这些实 ...

  9. Java之通过接口获取数据并用JDBC存储到数据库中

    最近做数据同步功能,从接口获取数据然后存到数据库中以便后续对数据进行相关操作,下面就贴一下相关代码. import com.alibaba.fastjson.JSON; import com.alib ...

  10. Java向上下转型中的陷阱{详细}

    1: 多态   多态时继承下面的产物,之所以存在向上向下转型的目的,就是解决参数传递的不变形,体现面向接口编程的重要性, 1.1 方法的多态性   ①. 方法的重载:同一个方法名称可以根据参数的类型或 ...