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创建项目环境的更多相关文章

  1. redis数据库-VUE创建项目

    redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...

  2. vue 创建项目

    先安装node.js环境 #先安装npm 阿里镜像 (之后cnpm 下载组件快速) npm install -g cnpm --registry=https://registry.npm.taobao ...

  3. Vue创建项目配置

    前言 安装VS Code,开始vue的学习及编程,但是总是遇到各种各样的错误,控制台语法错误,格式错误.一股脑的袭来,感觉创建个项目怎么这个麻烦.这里就讲一下vue的安装及创建. 安装环境 当然第一步 ...

  4. vue创建项目(推荐)

    上一节我们介绍了vue搭建环境的情况,并使用一种方式搭建了一个项目,在这里为大家推荐另一种创建项目的方式. vue init webpack-simple vuedemo02 cd vuedemo02 ...

  5. VUE创建项目

    Vue Cli项目搭建     vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) ...

  6. vue+webpack项目环境搭建

    首先安装node.js 下载地址:https://nodejs.org/en/download/ 看下是否成功安装 node -v 安装webpack,命令行npm install webpack - ...

  7. Vue创建项目及基本语法 一

    目录 目录: 一.创建Vue项目 0.使用环境要求及说明 1.使用命令创建项目 2.启动项目 二.简单指令 1.变量: 2.动态绑定变量值 3.v-once指令 4.v-html解析html 5.v- ...

  8. vue自学入门-2(vue创建项目)

    本人也是刚学习VUE,边找资料,边学习,边给大家分享.1.创建项目 2.启动项目 3.注意上面和下面全部用cnpm

  9. vue 创建项目的命令

    1 cmd   创建项目 找到指定目录 vue create test   或   vue ui  (可视化创建)推荐 ---------------------------------------- ...

随机推荐

  1. sizeof,真正终结版GCC与VC

    在VC6.0中sizeof结果是16.我电脑上装了个linux虚拟机,在虚拟机上GCC中结果是12, 恩不同编译器默认对齐数值不一样. VC 默认为 8 gcc 默认为 4 有个编译参数控制对齐. # ...

  2. HashMap底层实现原理及面试问题

    ①HashMap的工作原理 HashMap基于hashing原理,我们通过put()和get()方法储存和获取对象.当我们将键值对传递给put()方法时,它调用键对象的hashCode()方法来计算h ...

  3. Vue项目中同级组件传值的例子

    大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大, ...

  4. 【CF516D】Drazil and Morning Exercise

    题目 首先我们知道,在树上距离一个点最远的点一定是直径的两个端点之一 首先两遍\(\rm dfs\)把直径求出来,定义\(d(u)\)表示点\(u\)距离其最远点的距离,有了直径我们就能求出\(d\) ...

  5. opencv3中surfDetector中使用

    https://www.cnblogs.com/anqiang1995/p/7398218.html opencv3中SurfFeatureDetector.SurfDescriptorExtract ...

  6. 2019-8-31-dotnet-判断程序当前使用管理员运行降低权使用普通权限运行

    title author date CreateTime categories dotnet 判断程序当前使用管理员运行降低权使用普通权限运行 lindexi 2019-08-31 16:55:58 ...

  7. override和overload区别

    方法重载(overload)实现的是编译时的多态性(也称为前绑定) 方法重写(override)实现的是运行时的多态性(也称为后绑定)

  8. C++: string copy-on-write

    https://blog.csdn.net/haoel/article/details/24058 https://www.cnblogs.com/promise6522/archive/2012/0 ...

  9. Windows cd

    显示当前目录名或改变当前目录. CHDIR [/D] [drive:][path]CHDIR [..]CD [/D] [drive:][path]CD [..] ..   指定要改成父目录. 键入 C ...

  10. 概率期望——cf round362 div1

    给定n个数,求i的位置的期望 那么反向考虑,j!=i排在i前面的概率是0.5,那么对i的位置的期望贡献就是1*0.5 这题就是拓展应用一下 #include<bits/stdc++.h> ...