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);

},

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PHP混合项目引入Vue很简单,只需要按照以下步骤进行操作: 1. 首先,确保在项目的根目录下有一个用于Vue的工作目录。 例如,你可以在根目录创建一个名为"vue"的文件夹。 2. 在工作目录使用命令行工具(如cmd或终端),运行以下命令来初始化Vue项目: ``` vue init webpack vue ``` 这将创建一个名为"vue"的文件夹,其包含用于Vue项目的基本目录结构和配置文件。 3. 进入"vue"目录,并安装Vue项目的依赖项。 ``` cd vue npm install ``` 这将安装"vue"文件夹所需的所有依赖项。 4. 在Vue项目的"src"目录Vue组件。 可以按照Vue的常规开发方式,在"src"目录创建Vue组件的文件。 5. 编译和构建Vue项目。 在"vue"目录下运行以下命令: ``` npm run build ``` 这将根据"src"目录Vue组件,编译生成静态的JavaScript文件。 6. 在PHP项目引入Vue生成的JavaScript文件。 在PHP页面,可以使用HTML的`<script>`标签引入Vue生成的JavaScript文件。 例如: ``` <script src="vue/dist/build.js"></script> ``` 7. 在PHP页面Vue组件嵌入到需要的地方。 使用Vue的语法和指令将Vue组件嵌入到PHP页面的相应位置。 例如: ``` <div id="app"> <my-component></my-component> </div> ``` 通过以上的步骤,你就成功地将Vue引入到PHP混合项目了。现在,你可以利用Vue的强大功能和绑定机制来开发更加交互性和丰富的用户界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值