vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
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) 项目初始化
Vue项目创建选项
Babel就是将es6语言转换成es5语言交给浏览器处理
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属性,代表该样式只在组件内部起作用(样式的组件化)
export default {
name: "Test"
}
全局脚本文件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项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析相关推荐
- [vue] 从0到1自己构架一个vue项目,说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
[vue] 从0到1自己构架一个vue项目,说说有哪些步骤.哪些重要插件.目录结构你会怎么组织 1 项目类型 前端的项目目前来看主要分为小程序开发,H5页面开发.PC官网.后台管理系统开发.Nativ ...
- 程序员简历项目经历怎么写 ?三条原则不可忽视 【项目案例分享】
程序员简历项目经历怎么写 ?三条原则不可忽视 [项目案例分享] 作为一个程序员,想必大家曾经都做过一些项目,可能现在手头上也还有一些项目. 不过还是有很多学生朋友来问我"没有项目怎么办&qu ...
- vue项目结构php写哪里,vue项目结构(详细教程)
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下 新建一个项目之后,我们来看一下项目的目录结构 几个主要文件的内容 index.html文件(入口文件,系统进入之后先进入in ...
- vue在html中写style,vue开发之style(六)(CSS页面布局之样式、背景、文字)
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法 还有vue的使用,重点就在webpack这个: vue开发之webpa ...
- thinkphp用来做什么项目_thinkphp第1课:使用thinkphp创建一个项目
一.thinkphp第一课: 1.在网站根目录下,建立一个项目名称orange: 2.在orange目录下,创建一个入口文件index.php: define('APP_DEBUG',true); / ...
- 【C 语言】文件操作 ( 学生管理系统 | 命令行接收数据填充结构体 | 结构体写出到文件中 | 查询文件中的结构体数据 )
文章目录 一.学生管理系统 二.代码示例 一.学生管理系统 前两篇博客 [C 语言]文件操作 ( 将结构体写出到文件中并读取结构体数据 | 将结构体数组写出到文件中并读取结构体数组数据 ) [C 语言 ...
- JAVA项目怎么不是蓝色_解决IDEA创建maven项目时pom.xml没有变蓝的问题
如下所示: 选中pom.xml,右键点击add as maven project, 稍等片刻后就可以了 补充知识:Idea导入maven项目不自动识别pom.xml *Idea导入maven项目不自动 ...
- 【Android】Android Studio中新创建的app目录结构
安装Android Studio后,然后创建一个app项目.对于初学者来说,我们希望了解app目录结构,然后更好的进行开发工作. 但是要想了解一个app的目录结构,首先需要明确两个概念 Project ...
- linux文件系统目录结构采用的是,在Linux中,文件系统的目录结构采用的是()。...
在Linux中,文件系统的目录结构采用的是(). 更多相关问题 徒长枝属于以下哪种一年生枝条类别中的一种() 以下对得房率描述正确的是() 用拉伸试验的方法,可测定金属材料的(). 以下对得房率描述正 ...
最新文章
- C++中引用的用法和应用实例
- OpenCV Shi-Tomasi角点检测
- Ajax表单提交给C#后台选中的checkbox值
- mysql的一些初步使用!mysqlcheck mysqladmin 建立删除修改表,库,等
- netty客户端源码
- Linux磁盘管理2
- 红魔游戏手机6S Pro星耀白版开启预约:4399元起10月15日正式首销
- Scorm标准学习——Scorm RTE API与数据模型
- 操作数据库(增删改)
- 数据库基础 MySQL
- navicat 连接mysql is not allowed to connect to this mysql server
- 符合c语言语法规定的表达式,若变量定义为int fahr;,则5(fahr-32)/9是符合C语言语法的表达式...
- 【框架----Dubbo】基于开源Dubbo分布式RPC服务框架的部署整合
- 【195】apache2.4安装ssl 证书
- 是计算机系男神女神用英语怎么说,生日快乐我的男神英文怎么写
- 使用腾讯云Ubuntu20.04搭建代理服务器
- 占用栅格地图(occupancy grid map)
- lottie轻松实现复杂动画(抽奖举例)
- 广州蓝景分享—遇到网页慢,我们该怎么办?
- 快看,他纯用css绘制出了嫦娥手捧的月兔,关键还能飞,牛