精华内容
下载资源
问答
  • Vue脚手架

    千次阅读 2020-05-02 15:19:27
    1.Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue项目(可用cmd,powershell,vscode终端) ...

    1.Vue脚手架

    Vue脚手架可以快速生成Vue项目基础的架构,官方网址为Vue.cli

    A.安装3.x版本的Vue脚手架:

    npm install -g @vue/cli
    

    B.基于3.x版本的脚手架创建Vue项目:

    1).使用命令创建Vue项目(可用cmd,powershell,vscode终端)

    • 命令:vue create my-project
    • 选择Manually select features(选择特性以创建项目)
    • 勾选特性可以用空格进行勾选。
    • 是否选用历史模式的路由:n
    • ESLint选择:ESLint + Standard config
    • 何时进行ESLint语法校验:Lint on save
    • babel,postcss等配置文件如何放置:In dedicated config files(单独使用文件进行配置)
    • 是否保存为模板:n
    • 使用哪个工具安装包:npm
      图解:
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      总结:cd进入所创建的项目,出入命令:nom run server 使项目跑起来

    2).基于ui界面创建Vue项目
    命令:vue ui
    在自动打开的创建项目网页中配置项目信息。
    图解:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    总结:最后在任务中点击serve使项目跑起来

    3).基于2.x的旧模板,创建Vue项目
    npm install -g @vue/cli-init
    vue init webpack my-project
    步骤与1)相似,略,目前应用比较少

    C.分析Vue脚手架生成的项目结构

    node_modules:依赖包目录
    public:静态资源目录
    src:源码目录
    src/assets:资源目录
    src/components:组件目录
    src/views:视图组件目录
    src/App.vue:根组件
    src/main.js:入口js
    src/router.js:路由js
    babel.config.js:babel配置文件
    .eslintrc.js:

    2.Vue脚手架的自定义配置

     A.通过 package.json 进行配置 [不推荐使用]
            "vue":{
                "devServer":{
                    "port":"9990",
                    "open":true
                }
            }
        B.通过单独的配置文件进行配置,创建vue.config.js
            module.exports = {
                devServer:{
                    port:8888,
                    open:true
                }
            }
    

    以上配置为:端口修改为8888,打包好后自动打开项目

    加油,
    下一篇:Element-UI的基本使用

    展开全文
  • Vue 脚手架

    2020-09-21 16:14:01
    1.Vue 脚手架的基本用法 1.1安装 3.x 版本的 Vue 脚手架: npm install -g @vue/cli 1.2基于3.x版本的脚手架创建vue项目 1.3 Vue 脚手架生成的项目结构分析 2.Vue 脚手架的自定义配置 2.1. 通过 package.json ...

    1.Vue 脚手架的基本用法

    1.1安装 3.x 版本的 Vue 脚手架:

    npm install -g @vue/cli
    

    1.2基于3.x版本的脚手架创建vue项目

    在这里插入图片描述

    1.3 Vue 脚手架生成的项目结构分析

    在这里插入图片描述

    2.Vue 脚手架的自定义配置

    2.1. 通过 package.json 配置项目(了解)

    在这里插入图片描述

    2.2通过单独的配置文件配置项目

    ① 在项目的跟目录创建文件 vue.config.js
    ② 在该文件中进行相关配置,从而覆盖默认配置
    在这里插入图片描述

    展开全文
  • vue脚手架

    2020-07-28 17:23:02
    vue脚手架 接webpack二十九、vue脚手架1、Vue CLI2 版本1.1、安装1.2、初始化项目1.3、引导初始化内容详解1.4、项目结构详解2、Runtime-Compiler和Runtime-only2.1、区别2.2、render和template2.3、了解vue程序运行...

    二十九、vue脚手架

    1、Vue CLI2 版本

    1.1、安装

    npm i -g @vue/cli-init
    

    1.2、初始化项目

    vue init webpack my-project
    

    1.3、引导初始化内容详解

    在这里插入图片描述

    1.4、项目结构详解

    在这里插入图片描述

    2、Runtime-Compiler和Runtime-only

    2.1、区别

    在这里插入图片描述

    2.2、render和template

    在这里插入图片描述

    2.3、了解vue程序运行过程

    在这里插入图片描述

    2.4、代码展示

    main.js
    
    mport Vue from 'vue'
    import App from './App'
    
    new Vue({
      el: '#app',
      render: function (createElement) {
        // 1.普通用法: createElement('标签', {标签的属性}, [''])
        // return createElement('h2',
        //   {class: 'box'},
        //   ['Hello World', createElement('button', ['按钮'])])
    
        // 2.传入组件对象:
        return createElement(App)
      }
    })
    
    
    // runtime-compiler(v1)
    // template -> ast -> render -> vdom -> UI
    
    // runtime-only(v2)(1.性能更高 2.下面的代码量更少)
    // render -> vdom -> UI
    

    3、Vue CLI3版本

    3.1、安装

    npm i -g @vue/cli
    

    3.2、初始化项目

    vue create my-project
    

    3.3、引导初始化内容详解

    在这里插入图片描述

    3.4、项目结构详解

    在这里插入图片描述

    3.5、本地服务器打开用户图形化界面

    vue ui
    

    在这里插入图片描述

    展开全文
  • vue 脚手架

    2020-10-05 12:45:27
    vue脚手架 基于3.x版本的脚手架创建vue项目 //1. 基于交互式命令行的方式,创建新版vue vue create my-project //2.基于图形化界面的方式,创建新版vue vue ui //3.基于2x的旧模板,创建旧版vue npm install -g @...

    vue脚手架

    基于3.x版本的脚手架创建vue项目

    //1. 基于交互式命令行的方式,创建新版vue
    vue  create  my-project
    //2.基于图形化界面的方式,创建新版vue
    vue  ui
    
    //3.基于2x的旧模板,创建旧版vue
    npm install -g @vue/cli-init
    vue init webpack my-project
    
    vue 脚手架自定义配置

    通过单独的配置文件配置项目

    1. 在项目的根目录创建文件vue.config.js
    2. 在该文件中进行相关配置,从而覆盖默认配置
    module.exports = {
    	devServer: {
    		port: 8888,
    		open: true
    	}
    }
    

    Element-UI 的基本使用

    基于命令行方式手动安装

    1. 安装依赖包npm install element-ui -S
    2. 导入Element-UI 相关资源
    //导入组件库
    import ElementUI from 'element-ui'
    //导入组件相关样式
    import 'element-ui/lie/theme-chalk/index.css'
    //配置vue插件
    Vue.use(ElementUI)
    
    展开全文
  • VUE脚手架

    2020-12-22 20:37:44
    1、安装3.x 版本的vue脚手架 // 命令行 vue -V // 查看当前版本 npm uninstall -g vue-cli //卸载之前的 npm install -g @vue/cli //安装最新的 开始构建项目 vue create ‘项目名’ 回车创建 脚手架生成的项目...
  • 使用Vue脚手架构建项目

    万次阅读 2019-11-20 15:14:29
    使用Vue脚手架构建Vue项目 第一步在本机安装好Nodejs环境 下载地址:https://nodejs.org/en/download/ 安装完成后打开cmd管理员,输入node -v,npm-v查看是否安装成功! 如果这个已经成功那就j继续安装webpack和vue...
  • Vue 脚手架 Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/ npm install -g @vue/cli 检测是否安装成功 vue -V Vue 脚手架的基本用法 // 1. 基于 交互式...
  • vue脚手架安装以及vue脚手架创建项目(详细步骤)
  • 在安装vue脚手架前我们需要先配置vue的运行环境 然后win+r输入cmd 进入命令符窗口输入npm install -g @vue/cli 就可以安装最新的vue脚手架
  • Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
  • vue脚手架创建的时候,自己会为自己所选择的配置填写生成一个名字, 下次再创建脚手架的时候,直接选择你所生成的名字,会默认你上次所选择的配置, 那么假如以后vue脚手架创建的多了,配置的名字也多了,要删除其中...
  • VUE脚手架cli

    千次阅读 多人点赞 2020-07-10 11:04:00
    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 脚手架安装 1.安装node.js 进入官网下载(安装过程全部默认) ...4.安装vue脚手架 npm install @vue/cli -g 测试vue是否安装成功,vue -V 创建vue的
  • vue脚手架安装及vue脚手架创建项目(详细步骤) vue是前端非常火的框架,学会这个框架麻麻再也不用担心我获取不到dom的了 废话不多说,直接开整。 首先,我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上...
  • 关于 Vue 脚手架

    2020-04-02 15:17:02
    1\ Vue 脚手架的基本用法 2\ Vue 脚手架生成的项目结构分析 3\ Vue 脚手架的自定义配置 1\ Vue 脚手架的基本用法 Vue 脚手架用于快速搭建 Vue 项目基础架构,官网地址:https://cli.vuejs.org/zh/ 使用步骤 基于 ...
  • Vue框架之Vue脚手架

    2020-01-23 09:35:05
    Vue脚手架作用: Vue脚手架可以快速生成Vue项目基础的架构。 ◆ Vue脚手架安装: npm install -g @vue/cli ◆使用命令创建Vue项目 vue create my-project 选择Manually select features(选择特性以创建项目) ...
  • vue脚手架搭建

    2020-07-23 16:01:15
    vue脚手架搭建 一、安装vue npm install vue -g 二、安装vue-router npm install vue-router -g 三、安装vue脚手架 npm install vue-cli -g 查看vue脚手架版本 vue -V 注意此处V为大写 四、测试vue是否正常 ...
  • Vue脚手架搭建

    2020-10-28 09:44:50
    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构。 A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue项目 命令:vue create my-project 选择Manually...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,037
精华内容 7,214
关键字:

vue脚手架

vue 订阅