首页 > 其他分享 >创建VUE脚手架项目

创建VUE脚手架项目

时间:2023-02-10 11:58:32浏览次数:46  
标签:文件 VUE 项目 创建 视图 js 文件夹 脚手架

修改VUE脚手架项目服务端口

在项目文件夹下,找到package.json文件(此文件是创建项目中选择的配置文件):

 

 在此文件中的scripts属性下,修改serve属性的值,在原有值后追加--port 新的端口号,例如:

 

 

完成后,再次启动项目,将可以看到此项目启动在9000端口(以上的配置值):

 

VUE脚手架的项目结构为:

  • [.idea]:任何使用IntelliJ IDEA打开过的项目都会有此文件夹,是由IntelliJ IDEA自动生成的,记录了IntelliJ IDEA管理此项目时用到的文件,如果此文件夹如现错误,删除即可,后续会自动再次生成

  • [node_modules]:当前项目使用到的依赖项的文件夹,不要手动管理此文件夹中的内容,如果项目中缺失此文件夹,或此文件夹中的部分必要内容,项目将无法启动,或无法正确运行,需要在终端窗口中,在当前项目文件夹下执行npm install命令,将自动下载当前项目所需的所有依赖项到此文件夹中

    • 此文件夹通常被配置到.gitignore文件中,所以,使用GIT仓库时,提交代码时此文件夹是不会提交的!同理,从GIT仓库拉取项目到本地时,拉取到的项目也不会包含此文件夹

  • [public]:静态资源文件夹,用于存放静态资源文件(例如.css.js、图片等),此文件夹也是整个项目的资源根目录,此文件夹中的内容通过URL的 / 根路径来访问

    • favicon.ico:图标文件,是固定的文件名,如果你希望使用其它图标,可以使用新图标文件覆盖此文件(仍使用相同的文件名)

    • index.html:VUE脚手架项目中的唯一的网页文件,通常,不修改默认文件中的内容

  • [src]:项目的核心源代码文件所在的文件夹

    • [assets]:静态资源文件夹,此文件夹下的内容被使用时应该是相对固定的,不会随着程序的运行而发生变化的,例如你可以把网站的LOGO图片文件放在这里,但不应该把用户的头像图片放在这里

    • [components]:用于存放被其它视图组件调用的视图组件的文件夹

    • [router]:用于配置路由

      • index.js:默认的路由配置文件

    • [store]:用于配置全局的一些量

      • index.js:默认的配置全局的量的文件

    • [views]:用于存放视图组件的文件夹

    • App.vue:是默认会注入到index.html的视图组件,不要修改此文件的文件名

    • main.js:项目的主配置文件,通常,在安装了某些新的依赖项后,可能需要在此文件中添加一些配置

  • .gitignore:用于配置将哪些文件或文件夹忽略,不会提交到GIT仓库

  • bable.config.js:Bable的配置文件

  • jsconfig.json:JavaScript的基础配置文件

  • LICENSE:并不是VUE脚手架项目的必要文件,此文件是开源声明文件,当你的项目提交到GIT仓库并且设置为公开项目时,需要添加此文件

  • package.json:此项目的配置文件,主要配置了执行脚本(scripts属性)、项目的依赖项(dependencies属性)、开发时所需的依赖项(devDependencies属性),在不熟练的情况下,不要手动修改此文件中的内容

  • package-lock.json:是管理此项目时使用的、基于package.json自动生成的文件

  • README.md:是默认的项目的介绍文件,当你的项目提交到GIT仓库,大部分GIT仓库服务器都会你的项目的首页显示此文件的内容,当你需要编写此文件时,应该明确写出:此项目应该如何打开、如果启动、如果部署,及相关的注意事项等

  • vue.config.js:Vue的基础配置文件

关于VUE脚手架项目视图组件

推荐在IntelliJ IDEA中安装Vue.js插件,在编写视图组件的源代码时,可以得到更好的编码体验!

视图组件主要由3大部分组成,对应3个根级标签:

  • <template>:用于设计页面的元素,其子级可以编写设计页面的相关代码,例如HTML源代码,或使用了VUE后的一些标签,或添加了Element UI后,也可以使用Element UI的标签,需要注意:此标签的直接子标签只能有1个

  • <style>:用于设计样式,即编写CSS相关代码

  • <script>:用于编写程序代码,即编写JavaScript相关代码

在VUE脚手架项目安装Element UI

npm i element-ui -S

安装完成后,还必须在main.js中添加配置:

 

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

标签:文件,VUE,项目,创建,视图,js,文件夹,脚手架
From: https://www.cnblogs.com/BookSwordLee/p/17108392.html

相关文章

  • vue2 数组响应式一
    继上文,监听data后,data中的每个属性都有响应式效果,那么下面这种情况会触发响应式吗?import{observe}from"./reactive";import{Watcher}from"./watcher";const......
  • Vue 开发技巧
    1.路由参数解耦通常在组件中使用路由参数,大多数人会做以下事情。exportdefault{methods:{getParamsId(){returnthis.$route.params.id......
  • 在vue中用multipart/form-data方式上传文件并同表单同步提交数据
    项目是基于若依开发1、dialog页面内容<el-dialog:title="viewDataTitle":visible.sync="viewDataOpen"width="600px"append-to-body><el-formref="viewDat......
  • Vue cli 安装
    1.安装Node.js2.配置npm源  npmconfigsetregistryhttps://registry.npmmirror.com当配置成功后,可通过get命令可查看npm源:npmconfiggetregistry......
  • phpLDAPadmin 创建用户
    登陆phpLDAPadmin 点击左侧「cn=admin,dc=example,dc=org」 点击 ......
  • VUE与UE5 像素流送
    1:首先安装PixelStreaming插件 启动后需重启2:偏好设置额外启动参数:-AudioMixer-PixelStreamingIP=localhost-PixelStreamingPort=88883:打包window4:打包结束后,将......
  • vue2中diff算法
    答:参考文献:https://blog.csdn.net/Curry_On/article/details/125376479......
  • vue关于this.a=this.b,改变this.b的数据问题
    因为需要对请求到的数据进行处理后在渲染到视图上,所以借助handleDate变量来对原始的数据data2进行处理,methods:{//点击实时概况hidden(){letpanel......
  • vue3单页抽取api
    编写apiimportaxiosfrom'~/util/axios'constfindByPage=(data)=>{returnaxios.post("/emo/page",data)}constlogin=(data)=>{returnhttp.p......
  • Vue框架背后的故事
    前言Vue框架作为当前主流的前端框架之一,作者尤雨溪更是国内开发者心中男神,作为开发工程师你是否知道Vue框架名字的由来?你是否知道Vue框架作者尤大大创作Vue过程中的几个节点......