精华内容
下载资源
问答
  • 使用react 脚手架创建项目

    千次阅读 2019-03-06 11:17:54
    一直都是学的vue ,项目开发也是用的vue,那么多大公司都用的react,想具体了解一下react的优势。初步查看了react的文档,简单的搭了个初始化的demo。 安装全局的create-react-app ...创建react 项目 找到对应...

    一直都是学的vue ,项目开发也是用的vue,那么多大公司都用的react,想具体了解一下react的优势。初步查看了react的文档,简单的搭了个初始化的demo。

    安装全局的create-react-app 脚手架

    前提是已经安装好node,在node 环境中,使用npm 来安装
    在命令终端输入:npm install -g create-react-app

    创建react 项目

    找到对应的项目目录
    使用脚手架命令创建react 项目
    命令: create-react-app 项目名

    create-react-app react-project
    

    进入安装过程
    在这里插入图片描述
    安装成功
    在这里插入图片描述

    运行项目

    先进入项目目录
    然后npm start

    cd react-project
    npm start
    

    运行界面,默认端口是3000
    在这里插入图片描述
    目录结构

    .
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.css
        ├── index.js
        ├── logo.svg
        └── serviceWorker.js
    
    2 directories, 13 files
    

    public:里面包含了我们项目中的启动页面,react比较适合单页面项目应用开发。

    • favico.ico: 这是用来表示:快捷方式 小图标。详情可以访问文章
    • index.html: 初始页面。
    • manifest.json: wepack打包优化相关,本人没有研究过。

    src:里面包含项目文件

    • index.js 项目初始执行的js。内部进行页面元素的渲染操作。
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();
    
    
    • App.js 初始加载的组件。
    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    }
    
    export default App;
    
    

    打包

    输入打包命令 npm run build
    在这里插入图片描述
    在根目录多了一个打包文件夹build

    .
    ├── asset-manifest.json
    ├── favicon.ico
    ├── index.html
    ├── manifest.json
    ├── precache-manifest.bbc9a7961c70e7c57a7db0ad66643fe1.js
    ├── service-worker.js
    └── static
        ├── css
        │   ├── main.ab202988.chunk.css
        │   └── main.ab202988.chunk.css.map
        ├── js
        │   ├── 2.a539ea9d.chunk.js
        │   ├── 2.a539ea9d.chunk.js.map
        │   ├── main.668a09ff.chunk.js
        │   ├── main.668a09ff.chunk.js.map
        │   ├── runtime~main.fdfcfda2.js
        │   └── runtime~main.fdfcfda2.js.map
        └── media
            └── logo.5d5d9eef.svg
    

    进入到build 目录
    启动node http-server服务即可运行打包后的项目

    展开全文
  • 下载 composer 到项目目录或全局安装 作曲家安装 composer global 需要“fxp/composer-asset-plugin:1.0.0-beta3” 作曲家更新 一些说明: 通过 /admin url 访问管理仪表板(只有管理员用户可以访问它)。 登录...
  • 一、使用vue创建项目的详细步骤

    千次阅读 2021-01-10 00:40:19
    注意:不要使用 Git Bash 执行项目创建操作,使用 cmd 或者 powershell 之类的工具。 如果你还没有安装 VueCLI,或者版本低于 4,请执行下面的命令安装或是升级: npm install --global @vue/cli 在命令行中输入...

    B站黑马头条管理系统

    一、前言

    1、本例环境

    node.js:v12.16.1
    npm:6.13.4
    vue:@vue/cli 4.5.8
    

    环境自己百度下载搭建

    二、创建vue项目

    注意:不要使用 Git Bash 执行项目创建操作,使用 cmd 或者 powershell 之类的工具。

    如果你还没有安装 VueCLI,或者版本低于 4,请执行下面的命令安装或是升级:

    npm install --global @vue/cli
    

    在命令行中输入以下命令创建 Vue 项目:

    vue create 【项目名】
    
    Vue CLI v4.2.3
    ? Please pick a preset:
      default (babel, eslint)
    > Manually select features
    

    default:默认勾选 babel、eslint,回车之后直接进入装包

    manually:自定义勾选特性配置,选择完毕之后,才会进入装包

    选择第 2 种:手动选择特性,支持更多自定义选项

    ? Please pick a preset: Manually select features
    ? Check the features needed for your project:
     (*) Babel
     ( ) TypeScript
     ( ) Progressive Web App (PWA) Support
     (*) Router
     ( ) Vuex
     (*) CSS Pre-processors
    >(*) Linter / Formatter
     ( ) Unit Testing
     ( ) E2E Testing
    

    分别选择:
    Babel:es6 转 es5
    Router:路由
    CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus 等
    Linter / Formatter:代码格式校验,ESLint 代码格式校验

    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
    

    是否使用 history 路由模式,这里输入 n 不使用

    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
      Sass/SCSS (with dart-sass)
      Sass/SCSS (with node-sass)
    > Less
      Stylus
    

    选择 CSS 预处理器,这里选择我们熟悉的 Less

    ? Pick a linter / formatter config:
      ESLint with error prevention only
      ESLint + Airbnb config
    > ESLint + Standard config
      ESLint + Prettier
    

    选择校验工具,这里选择 ESLint + Standard config

    ? Pick additional lint features:
     (*) Lint on save
    >(*) Lint and fix on commit
    

    选择在什么时机下触发代码格式校验:

    • Lint on save:每当保存文件的时候
    • Lint and fix on commit:每当执行 git commit 提交的时候

    这里建议两个都选上,更严谨。

    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
      In package.json
    

    Babel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:

    • In dedicated config files:分别保存到单独的配置文件
    • In package.json:保存到 package.json 文件中

    这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。

    ? Save this as a preset for future projects? (y/N) N
    

    这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。

    这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。

    ✨  Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89.
    �  Initializing git repository...
    ⚙  Installing CLI plugins. This might take a while...
    
    [          ........] - extract:object-keys: sill extract json5@2.1.1
    

    向导配置结束,开始装包。
    安装包的时间可能较长,请耐心等待…

    ⚓  Running completion hooks...
    
    �  Generating README.md...
    
    �  Successfully created project topline-m-89.
    �  Get started with the following commands:
    
     $ cd topline-m
     $ npm run serve
    

    安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入:

    # 进入你的项目目录
    cd 【项目目录】
    
    # 启动开发服务
    npm run serve
    
     DONE  Compiled successfully in 7527ms
    
    
      App running at:
      - Local:   http://localhost:8080/
      - Network: http://192.168.10.216:8080/
    
      Note that the development build is not optimized.
      To create a production build, run npm run build.
    

    启动成功,命令行中输出项目的 http 访问地址。
    打开浏览器,输入其中任何一个地址进行访问。

    如果能看到该页面,恭喜你,项目创建成功了。

    调整初始目录结构

    这里主要就是下面的两个工作:

    • 删除初始化的默认文件
    • 新增调整我们需要的目录结构

    1、将 App.vue 修改为:

    <template>
      <div id="app">
        <h1>System发布系统</h1>
        <!-- 路由出口 -->
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style lang="less"></style>
    
    

    2、将 router/index.js 修改为:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    // 路由配置表
    const routes = []
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    
    

    3、删除默认生成的不相关文件:

    • src/views/About.vue
    • src/views/Home.vue
    • src/components/HelloWorld.vue
    • src/assets/logo.png

    4、增加以下几个目录

    • src/api 目录
      • 存储接口模块
    • src/utils 目录
      • 存储一些工具模块
    • src/styles 目录
      • index.less 文件,设置全局样式
      • main.js 中加载全局样式 import './styles/index.less'

    调整之后的目录结构如下。

    .                                 
    ├── README.md                     
    ├── babel.config.js               
    ├── package-lock.json             
    ├── package.json                  
    ├── public                        
    │   ├── favicon.ico               
    │   └── index.html                
    └── src                           
        ├── api
        ├── App.vue                   
        ├── assets                    
        ├── components                
        ├── main.js                   
        ├── router
        ├── utils
        ├── styles               
        └── views
    

    Element 组件库

    Element 介绍

    Element 是饿了么前端团队开发的一个基于 Vue.js 的桌面端组件库,它提供的组件非常丰富,不仅功能强大,而且简单易用。

    Element 非常的流行,大多数基于 Vue.js 开发的管理系统都会使用到它。

    • 官网:https://element.eleme.io/
    • GitHub 仓库:https://github.com/ElemeFE/element
      • 目前已有 44.8k 的 Star 了

    导入到项目中

    1、安装

    npm i element-ui
    

    2、在 main.js 中配置 element 组件库

    /**
     * 项目的启动入口
     */
    
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    // 加载 element 组件库
    import ElementUI from 'element-ui'
    
    // 加载 element 组件库的样式
    import 'element-ui/lib/theme-chalk/index.css'
    
    // 加载全局样式文件
    import './styles/index.less'
    
    // 全局注册 element 组件库
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    // 创建 Vue 根实例
    // 把 router 配置到根实例中
    // 通过 render 方法把 App 根组件渲染到 #app 入口节点
    new Vue({
      router,
      render: h => h(App)
      // el: '#app' // 等价于 $mount('#app')
    }).$mount('#app')
    
    

    使用说明

    用哪个组件就看哪个组件的说明文档。

    复制 -> 粘贴 -> try-try-see。

    封装请求模块

    为了方便,我们在这里把 axios 单独封装一个模块用于项目中的请求操作。

    /**
     * 基于 axios 封装的请求模块
     */
    import axios from 'axios'
    
    // axios()
    // axios.get()
    // axios.post()
    
    // 创建一个 axios 实例,说白了就是复制了一个 axios
    // 我们通过这个实例去发请求,把需要的配置配置给这个实例来处理
    const request = axios.create({
      baseURL: '127.0.0.1:80' // 请求的基础路径,自己后台服务的地址
    })
    
    // 请求拦截器
    
    // 响应拦截器
    
    // 导出请求方法
    export default request
    
    // 谁要使用谁就加载 request 模块
    // import request from 'request.js'
    // request.xxx
    // request({
    //   method: ,
    //   url: ''
    // })
    
    
    展开全文
  • 创建项目 点击文件==》新建==》项目,出现如下界面: 这里选择uni-app ,输入项目名,文件存储地址,模板选择ColorUI。如下图: 这里选择uni-app,是后面将以uni-app的语法,组件来进行开发。这样开发出来的项目...

    创建项目

    点击文件==》新建==》项目,出现如下界面:
    在这里插入图片描述
    这里选择uni-app ,输入项目名,文件存储地址,模板选择ColorUI。如下图:
    在这里插入图片描述
    这里选择uni-app,是后面将以uni-app的语法,组件来进行开发。这样开发出来的项目可以同时发布到各个平台,而不需要重新维护代码,省时省力。
    模板选择ColorUI,是ColorUI已经造好了一些前端样式的轮子,对于初学者来说,可以专注于业务逻辑的设计,而不用花费时间精力再去写css调样式。

    目录介绍

    上面创建完成后,会生成如下图的目录:
    在这里插入图片描述
    按照顺序:
    colorui:是colorui的相关文件。
    node_modules:是安装第三方插件的目录,即npm install 下载的相关文件。
    pages:是页面目录,以后开发的页面都放在这里。
    static:是静态文件的目录,一般放一些用的图片,logo等等。
    App.vue:页面入口文件。页面全局的js、css引用都写在这里。
    main.js:程序入口文件。需要使用的插件,公共组件放在这里。
    manifest.json:HBuilderX的配置文件。在程序发布的时候会用到。后面用到会详细讲解。
    package-lock.json:第三方插件依赖包管理。一般不用管它。
    pages.json:页面配置文件。配置页面的属性。

    前端项目创建完成。做好准备,接下来就开始讲解前端开发。

    项目预览,扫描二维码查看:
    在这里插入图片描述

    展开全文
  • 一、创建Android项目 安装好Android Studio并且下载好SDK 之后,我们可以新建一个android项目。 依次点菜单栏的File–New–New Project 我们选择一个带有空白activity的项目,然后点next 这里要设置好项目的名称、...

    一、创建Android项目

    安装好Android Studio并且下载好SDK 之后,我们可以新建一个android项目。
    依次点菜单栏的File–New–New Project
    新建Android项目
    我们选择一个带有空白activity的项目,然后点next
    创建空白activity的项目
    这里要设置好项目的名称、包名、项目位置、项目语言(Java或kotlin)以及最好运行平台,都设置好之后点finish就创建好了一个空白的Android项目
    这是一个hello world 的简单项目,你可以在虚拟机运行一下看看效果

    二、修改项目图标

    生成项目的时候它会自己设置一个默认的项目图标,我们需要自己设置一个自定义的。
    依次点击File–New–Image Asset

    在path选项那里设置你的logo(png格式)的文件路径,resize滑动条设置logo的缩放,合适之后可以点击next,再点击finish即可

    三、生成签名的APK文件

    依次点击菜单栏的Build–Generate Signed Bundle/APK,在弹出的窗口选择APK,点next

    如果没有keystore,可以点击Create创建一个,创建很简单,填写一下信息就行。然后点next

    我们要选择release版,并且把V1、V2都勾选上,最后点击finish稍等几秒钟即可

    等它生成apk文件之后,我们可以在项目的app\release目录下找到生成的apk文件了

    展开全文
  • IDEA创建springboot项目或从git拉取springboot项目时,主启动类失效,logo不是主启动类标志的解决方案;idea创建springboot项目失败
  • uni-app学习笔记1(创建项目、运行、打包)

    千次阅读 多人点赞 2020-08-10 11:28:56
    二、打开HBuilderX,创建项目 三、创建完成 四、运行 1、浏览器 2、手机(需要开启USB调试,然后USB选项选择“用作MIDI输入设备”) 3、微信小程序 注意,这里如果直接运行,会报错 需要在微信开发者中...
  • 创建项目Admin本次是使用ext6.0.2的sdk创建以下项目.使用sencha -sdk ./XXX generate app -s ./XXXX/templates/XXX Admin ./Admin命令。 修改项目配置文件 app.json在项目的根目录有app.json文件,需要修改其中...
  • 重新创建和收集“ Mr Robot”电视节目的虚构徽标作为矢量文件的项目 徽标: 免责声明 这是一个由粉丝制作的项目,与任何正式的机器人先生电视节目或美国网络都不相关。 USA Network拥有徽标的正式权利。
  • 以搭建一个项目名称为vue-test的Vue前端项目为例
  • 每当SpringBoot项目启动的时候,在打印台会自动打印一个SpringBoot的启动logo
  • 1、WebStrom建立React App 方式一: ...npm install babel babel-...脚手架创建项目文档也采用了webpack打包工具,具体可以查看 /node_modules/react-scripts/config 文件里面,webpack的配置都在该文件中。
  • 创建vue项目

    千次阅读 2019-01-01 16:36:28
    创建项目时我们有开启了一个standard语法效验,JavaScript 代码规范,自带 linter & 代码自动修正。 官网:https://standardjs.com/readme-zhcn.html 主要的语法规则有: 使用两个空格  – 进行缩进 ...
  • 项目介绍 首先,黑马头条移动端是一个IT资讯移动web应用,有着和今日头条一样的资讯浏览体验。 主要功能:资讯列表、标签页切换,文章举报,频道管理、离线频道,文章详情、阅读记忆,关注功能、点赞功能、评论...
  • React项目创建并启动

    2021-03-09 11:33:02
    创建项目并启动 第一步,全局安装:npm i -g create-react-app 第二步,切换到想创项目的目录,使用命令:create-react-app hello-react 第三步,进入项目文件夹:cd hello-react 第四步,启动项目:npm start react...
  • 徽标场景-原型场景创建器 使用项目 ...我创建项目是为了在屏幕上看到我的新项目的徽标,并进行了多种更改,例如徽标背景颜色,徽标品牌名称,品牌名称颜色,字体类型,字体大小,徽标位置和品牌名
  • 新建的项目引入elementUI后就报错了,并且页面上什么都没有 在main.js里 引入elementUi的3个语句, import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ...
  • github上创建dockerfile项目

    千次阅读 2016-11-06 12:28:16
    登录github,添加新项目 填写项目基本信息 完成后我们就在github上创建了一个项目,我们需要在本机或...mkdir gitDockerfile //创建项目目录 git init //初始化git git clone git@github.com:tonyxinminghui/gitDock
  • 完全用Swift编写的Logo解释器。 Curretly通过基本的内置命令(例如, forward , back , left , right支持徽标语法。 在我的中介绍了语言参考和非常基础的工作原理。 您可以使用创建的与解释器一起玩。 此外,...
  • PornHub又名P站,网站流量在全球也是TOP10级别的,和淘宝、百度等站点同一个level,他们家网站的LOGO也显得个性鲜明。如何用Python画...
  • className:这是添加到.logo-container元素的CSS类。 background:添加到body元素的CSS背景中的字符串。 作者:在此处添加您的github-username或@twitterAccount 2)创建文件 创建一个带有主题名称的目录(在the ...
  • labview:生成EXE:labview2015程序框图-&amp;gt;工具-&amp;gt;通过VI生成应用程序...创建项目lvproject-&amp;gt;XXX属性-&amp;gt;生成 属性的地方有 : 应用名称 图标 版本 多语言 等 ...
  • 使用create-react-app创建ts项目

    千次阅读 2020-08-19 15:22:51
    1、项目安装运行 create-react-app 你的项目名 -...import logo from './logo.svg'; import './App.css'; import Arrowlist from './home'; const App: React.FC = () => { return ( <div className="App">
  • VSCode中如何创建React项目

    千次阅读 2021-02-05 15:00:30
    susan@susandeMac-mini ~ % 3、在终端输入create-react-app demoone,创建名称为demoone的项目 susan@susandeMac-mini ~ % create-react-app demoone Creating a new React app in /Users/susan/demoone....
  • 最近公司有个新需求,按照之前的项目换个名字,logo及部分资源文件重新打包个新的app 实现思路 1.拷贝一份项目更换名字、logo等 (效率低,麻烦 ) ❌ 2.多渠道打包 (方便,快捷) ✅ 实现方法 项目下build.gradle&gt;...
  • 使用zxing生成带logo的二维码图片,自动调节logo图片相对二维码图片的大小 可选是否带logo,可选是否保存二维码图片;结果返回base64编码的图片数据字符串 页面显示: 引用maven zxing-core jar com.google.zxing...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,571
精华内容 15,028
关键字:

创建项目logo