精华内容
下载资源
问答
  • 2017-02-12 14:15:58

    好吧,很久没碰过这个blog。有什么笔记我都是记在现实的笔记本上面,无奈有时候记得乱,找不到,这边mark down。

    最近在做Vue项目,搭建环境避免不了。一开始学习的时候,还是先学webpack的基本知识,一步一步配置入口文件等等。后面当然就嫌麻烦了,尤大大的vue-cli打遍天下无敌手。

    命令vue init webpack有两种版本,一个simple版vue init webpack-simple,simple版不带eslink语法检查、单元测试;vue init webpack带全功能。(另,vue的打包工具不仅限制于webpack,可以遵照vue init <template-name> <project-name>,即可以vue init browserify。)

    目前可用的模板包括:

    • browserify--全功能的Browserify + vueify,包括热加载,静态检测,单元测试

    • browserify-simple--一个简易的Browserify + vueify,以便于快速开始。

    • webpack--全功能的Webpack + vueify,包括热加载,静态检测,单元测试

    • webpack-simple--一个简易的Webpack + vueify,以便于快速开始。

    默认装好该用的东西了。开始:
    1、vue init webpack blog
    填写:Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理) 
      Project name (blog-website) 直接回车默认 
      Project description (A Vue.js project) 直接回车默认 
      Author 直接回车默认 
      Use ESLint to lint your code? n 
      pick an eslint preset. 默认Standard 
      setup unit tests with karma + mocha?No(单元测试不需要) 
      setup e2e tests with Nightwatch?No(单元测试不需要)
    2、cd blog
    3、npm install
    4、npm install vue-router vue-resource -save
    5、npm run dev(启动项目)
    6、npm run build(发布项目)

    vue-cli脚手架搭建过程就是这样的

    更多相关内容
  • vue项目搭建

    千次阅读 2017-12-08 00:02:53
    vue项目搭建  一、 安装 node.js  百度node.js,去官网下载,安装之后运行node -v 和 npm -v查看node和npm的版本号。 二、安装 vue-cli   首先安装npm install -g cnpm --registry=...
    vue项目搭建
      一、 安装 node.js
            百度node.js,去官网下载,安装之后运行node -v 和 npm -v查看node和npm的版本号。
    二、安装 vue-cli 
            首先安装
    npm install -g cnpm --registry=https://registry.npm.taobao.org(类似挂vpn)
            执行 cnpm -v查看版本
            安装vue-cli脚手架工具(vue项目构建工具)
             cnpm install -g vue-cli    (如果更新失败,
    npm cache clean清除缓存
              vue -V 查看版本
    三、生成项目
          vue init webpack Vue-Project   
         (webpack是vue其中的一个模板,还有例如simple啥的,可以在
    https://github.com/vuejs-templates 查询
         (Vue-Project  是自定义的项目名称


    四、安装项目依赖
          首先进入 Vue-Project文件夹,在此处打开控制台,输入cnpm install(安装项目依赖,根据package.json文件
    五.运行vue项目
           npm run dev (如果需要额外添加依赖,根据控制台提示install)
    展开全文
  • 主要介绍了vue项目搭建以及全家桶的使用详细教程(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • webpack + vue项目搭建源码
  • 主要介绍了requirejs + vue 项目搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • elementUI+vue项目搭建

    2018-12-10 09:25:46
    elementUI+vue项目搭建 一条龙服务.
  • vue项目搭建流程

    千次阅读 2019-03-05 15:30:51
    1、安装node(主要用于使用npm...(1)3.X版本启动方式 npm run serve (2)低版本启动方式 npm run dev 好了,项目搭建配置完成了,现在就开始着手自己的项目开发吧。 如有问题,请指出,接受批评。 个人微信公众号:

     

    1、安装node(主要用于使用npm包管理器),配置npm的环境变量

    安装包下载官网地址:https://nodejs.org/zh-cn/(推荐使用长期LTS版,长期支持,稳定)

    注意下载的位数,默认是win10的64位,下载mac,win7,32位等可点击官网顶部的下载。

    直接一直下一步安装即可,可以更改安装路径,但还是建议默认路径安装。

    node安装包安装完自带node js的配置,只需配置npm的变量即可。

    2、全局安装脚手架(只需安装一次即可,两者都安装执行)

    (1)3.X版本安装

    npm install -g @vue/cli 

    (2)低版本安装

    npm install -g @vue/cli-init

    3、在想要创建项目的目录下打开cmd命令行(选择需要安装的一个版本即可

    注:hello-word是我要安装的项目名,根据实际需求更改项目名

    (1)3.X版本安装(不会看到webpack的配置文件)

    vue create hello-world

    (2)低版本安装(会看到webpack的配置文件,推荐使用

    vue init webpack hello-world

    4、安装步骤教程

    (1)3.X安装步骤:

    ①、系统将提示您选择预设

    可以选择基本Babel + ESLint设置附带的默认预设,也可以选择“手动选择功能”以选择所需的功能

    (推荐选择第二个,手动选择)

    ②、根据个人需要选择配置项(选择方法:空格即可)

    ③、路由器是否选择history模式(推荐选择 y,如果选择n,那么路由会默认为hash模式)

    ④、selint语法选择(推荐选择eslint+standard config:标准模式)

    ⑤、检测方式(推荐选择lint on sava)

    ⑥、文件类型(推荐使用json)

    ⑦、保存预设以供未来使用(推荐使用 y)

    ⑧、保存预设并命名

    (2)低版本安装步骤:

    前面四步都可以一路回车,第五步询问是否安装vue-router,选择是,第六步使用eslint代码检查,选择否,第七步设置单元测试,选择否,第八步测试监听,选择否,第九步选择npm即可,等待安装完成

    (其实安装都没有固定的步骤,完全根据个人项目需求,这里只是推荐大众化的步骤)

    5、文件夹详解

    (1)、src文件夹放置所有的资源文件,一般会被webpack用来打包

    ①assets文件夹放置资源文件,如:css,js,fonts

    ②components文件夹放置所有的子组件,即每个页面级组件的子组件,例如:index页面级组件,把它分为header、content、footer三部分,只要在components文件夹下新建一个index文件夹(为了区分其他组件),放入对应的子组件

    ③pages文件夹放置所有的页面级组件

    ④router文件夹中index用来配置路由信息

    ⑤main.js是入口文件,可在此引入公共的样式等

    (2)、static放置的资源文件不会最终被weback打包(一般放置图片文件和本地模拟的json数据)

    6、更改配置

    (1)、更改App.vue文件

    <template>
        <div id="app">
            <img src="/static/logo.png">
            <router-view/>
        </div>
    </template>

    更改为:(目的:插入一个路由插槽,进行页面的跳转,显示不同的路由)

    <template>
        <router-view></router-view>
    </template>

    (2)、更改main.js文件

    new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

    更改为:(目的:以app做为根组件,每次在路由插槽渲染页面)(如果有语法报错,禁用eslint检查即可)

    new Vue({
        el: '#app',
        router,
        render(h){
            return h(App)
        }
    })

    (3)、更改router文件夹的index文件(根据项目需求,引入对应页面,配置路由信息,进行页面跳转)(  /  代表跟路径)

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    // 首页
    import Index from "../pages/Index";
    // 登录
    import Login from "../pages/Login"
    
    Vue.use(Router);
    
    export default new Router({
      linkExactActiveClass: "act",
      mode: "history",
      routes: [
        {
          path: '/Index',
          name: 'Index',
          component: Index
        },
        {
          path: '/',
          name: 'Login',
          component: Login
        }
      ]
    })
    

    7、项目启动方式

    (1)3.X版本启动方式

    npm run serve

    (2)低版本启动方式

    npm run dev

    好了,项目就搭建配置完成了,现在就开始着手自己的项目开发吧。

    如有问题,请指出,接受批评。

    个人微信公众号:

    展开全文
  • Vue项目搭建 + 引入ElementUI

    万次阅读 多人点赞 2018-11-06 23:49:11
    初始化单页系统 在学习Vue的过程中,官方网站都是给了非常详细的介绍,所以初始化大型单页应用,官网给的参考资料地址:https://cn.vuejs.org/v2/guide/installation.html ...【第二步】输入npm install vue 【第三...

    初始化单页系统

    在学习Vue的过程中,官方网站都是给了非常详细的介绍,所以初始化大型单页应用,官网给的参考资料地址:https://cn.vuejs.org/v2/guide/installation.html

    1、NPM

    在这里插入图片描述

    2、命令行工具 (CLI)

    在这里插入图片描述

    3、具体操作步骤

    【第一步】在004目录下右键,然后选择------在命令提示符中打开
    在这里插入图片描述
    【第二步】输入npm install vue
    在这里插入图片描述
    【第三步】安装命令行工具vue-cli:cnpm install vue-cli --global
    在这里插入图片描述
    【第四步】初始化项目的命令:vue init webpack 项目名
    在这里插入图片描述
    【第五步】进入项目命令:cd my-project
    在这里插入图片描述
    【第六步】运行项目:npm run dev
    在这里插入图片描述
    【第七步】访问项目,如果一切成功,那么会出现下图所示页面,系统初始化成功
    在这里插入图片描述

    系统目录介绍

    1、经过操作,项目my-project已经初始化成功,目录结构如下:
    在这里插入图片描述

    3. 修改项目

    1、修改App.vue,删除无关内容

    在这里插入图片描述

    <template>
    <div id="app">
    <router-view/>
    </div>
    </template>
    
    <script>
    export default {
    }
    </script>
    <style>
    </style>
    

    2、修改main.js代码

    在这里插入图片描述

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    router,
    render: c=> c(App)
    })
    

    3、修改HelloWorld.vue组件中的代码

    在这里插入图片描述

    ElementUI整合项目

    在项目中,我们采用ElementUI作为系统框架,所以需要安装ElementUI框架
    ElementUI框架官网地址:http://element-cn.eleme.io/#/zh-CN/component/installation
    1、安装ElementUI: cnpm i element-ui -S
    i : 安装指令,全拼:install
    -S :生产环境,全拼:--save
    -D :开发环境,全拼:--save--dev
    -O :可选依赖,全拼:--save--optional
    -E :精确安装指定模块版本,全称:--save--exact
    -g:全局安装,全拼:--global

    在这里插入图片描述
    2、在main.js中引入ElementUI模块
    在这里插入图片描述

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false
    
    Vue.use(ElementUI)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: c => c(App)
    })
    
    展开全文
  • VUE3.0的脚手架构建的最基本的初始项目压缩包,不包含router路由,解压运行,npm install,npm run dev即可运行
  • Vue 项目搭建流程和使用大全

    万次阅读 多人点赞 2018-07-21 21:18:49
    Vue 项目搭建流程及项目中遇到的问题 项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack projectName 创建项目 cd projectName cnpm install 安装依赖...
  • Vue项目搭建常用的配置文件,request.js和vue.config.js

    万次阅读 多人点赞 2021-06-29 09:28:06
    }, error => { console.log('err' + error) // for debug return Promise.reject(error) } ) export default request vue.config.js: // 跨域配置 module.exports = { devServer: { //记住,别写错了devServer//...
  • 主要介绍了9102年webpack4搭建vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • this is a vue demo
  • vue项目详细搭建步骤

    2019-04-02 10:33:51
    详细描述怎么搭建vue项目,nodejs安装,idea支持,以及vue打包部署
  • vue项目搭建,启动

    千次阅读 2019-09-16 16:46:10
    打开cmd命令框: 1.安装node.js, 检测版本node -v, 检测包管理工具npm -v 2. 安装webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如下图,如果出现...安装vue-cli脚手架构...
  • 如何搭建一个vue项目(完整步骤)

    千次阅读 2022-04-25 01:09:38
    通过 @vue/cli 实现的交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service),该依赖: 可升级; 基于 webpack 构建,并带有合理的默认配置; ...
  • 主要介绍了vue3.0 搭建项目总结(详细步骤),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue项目搭建步骤

    万次阅读 2017-08-11 15:49:51
    一. vue-cli初始化 1. 全局安装 vue-cli ...2. 创建一个基于 webpack 模板的新项目 vue init webpack my-project 3. 安装依赖 cd my-project npm install (换源安装: npm install --registry https://registry.
  • springboot+vue前后的项目搭建

    千次阅读 2022-05-04 14:09:49
    一、springboot项目搭建 前言-使用技术 springboot mybatis-plus mysql 1.2 创建springboot项目 1.2 集成mybatis-plus 1.3 设置跨域 1.1 配置类 ...2.1 创建vue项目 2.2 集成element-ui 2.3 集成axios ...
  • vue项目框架搭建

    千次阅读 2021-09-22 21:49:36
    vue项目
  • 1.vue create vue-admin 创建项目 2.选择创建方式 默认Vue2配置 默认Vue3配置 手动选择配置 3.自定义配置选项 ( ) Babel // 语法转换 ( ) TypeScript // 使用 TypeScript ( )
  • SpringBoot+vue 项目搭建

    千次阅读 2018-08-05 21:11:38
    这里通过创建后台系统管理项目为背景,一步步使用vue和spingboot搭建,希望可以帮助入门同学快速使用vue和Springboot开发项目。 在这里不介绍一些关键vue语法,语法可以参考 - vue官网 - vue-router路由官网 - ...
  • idea创建springboot+vue项目搭建之旅(一) (本文用于自己过一下流程,怕以后忘了) 创建springboot项目 首先,需要个springboot项目,百度上就有好多建项目的教程,我大致参考了以为老哥的文章(ps:这里加一点,在...
  • 你可以用此项目搭建属于你的项目!! 熬夜不易,如果您觉得我的文章或者 demo 有用,可以赏我杯咖啡(^_−)☆ webpack4 搭建 vue 项目点 微信 另外,我也做了一个, 分享给大家 在 github 项目的右上角,有三个按钮,...
  • idea创建springboot+vue项目搭建之旅(二) (记录vue的项目搭建,自己记录用) 主要来自于下面这个老哥的文章,感谢! vue完整项目配置 首先了解并创建好目录结构 初始项目结构如下: ┌── build // webpack...
  • 搭建vue项目环境详细配置

    千次阅读 2021-12-07 14:42:05
    一、安装node环境 ...检查是否安装成功:【1】node -v【2】npm -v ...检查是否安装成功:【3...二、搭建vue项目环境 1、全局安装vue-cli npm install --global vue-cli npm config list 里面的prefix查看安装目录里面必须有vu
  • 本课程会完全脱离脚手架,站在前端工程化的角度,利用webpack手把手教你从0开始搭建一个企业级的vue项目。 课程将会涉及到的知识点有: 前端工程化搭建webpack配置、webpack-chain使用引入babel转换最新的es语法引入...
  • Vue脚手架搭建以及创建Vue项目流程

    千次阅读 2022-04-25 22:20:41
    Vue脚手架的创建以及用脚手架创建项目的全套流程

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,538
精华内容 29,015
关键字:

vue项目搭建