`
liang100100
  • 浏览: 37881 次
  • 性别: Icon_minigender_2
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

搭建vue项目相关

 
阅读更多
1、安装node js
官网下载:https://nodejs.org/en/download/
安装完成后cmd,输入

node -v

npm -v


如果能看到node和npm的版本号了,说明已经安装成功


2、安装vue-cli
有npm和cnpm两种方式,网上都说cnpm好些,所以我也用的cnpm安装,

首先利用淘宝镜像安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org


cnpm -v 


可以查看当前cnpm版本,这个和npm的版本还是不一样的
然后全局安装 vue-cli

cnpm install -g vue-cli


这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。

查看vue版本号

vue -V    //注:V是大写字母V


如果此时提示vue不是内部命令,则查看是否没有配置path,全局搜索vue.cmd,把他的目录加到path中即可

3、使用vue-cli来创建一个基于 webpack 模板的新项目
创建
cmd利用cd指令进入到保存项目的文件夹下,然后输入命令


$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install   //下载依赖包
$ npm run dev   //也可以npm start 启动项目



4、后续其它步骤—打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

项目结构
.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要项目配置
│   └── ...
├── src/
│   ├── main.js                 # 应用入口文件
│   ├── App.vue                 # 主应用程序组件
│   ├── components/             # ui组件
│   │   └── ...
│   └── assets/                 # 模块资源(由webpack处理)
│       └── ...
├── static/                     # 纯静态资源(直接复制)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试spec文件
│   │   ├── index.js            # 测试构建条目文件
│   │   └── karma.conf.js       # 测试跑步者配置文件
│   └── e2e/                    # e2e测试
│   │   ├── specs/              # 测试spec文件
│   │   ├── custom-assertions/  # e2e测试的自定义断言
│   │   ├── runner.js           # 测试跑步脚本
│   │   └── nightwatch.conf.js  # 测试跑步者配置文件
├── .babelrc                    # babel 配置
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # editor 配置
├── index.html                  # index.html模板
└── package.json                # 构建脚本和依赖关系



分享到:
评论

相关推荐

    使用vs code搭建vue项目1

    使用 VS Code 搭建 Vue 项目 VS Code 是一款功能强大且灵活的代码编辑器,它提供了丰富的扩展插件和功能,可以满足各种开发需求。Vue 是一款流行的前端框架,使用它可以快速构建复杂的 Web 应用程序。本文将指导...

    webpack搭建vue项目总结.md

    对于前端vue框架中JavasScript应用程序的模块打包器webpack搭建vue项目的具体步骤和详细的介绍

    内网搭建vue环境.doc

    通过本资源,你将学习到如何在内网环境中安装 Nodejs、配置镜像站、下载 Vue 相关依赖项、迁移资源文件和创建 Vue 项目。 一、准备工作 在开始搭建 Vue 环境之前,需要准备两台电脑,一台能上网,一台开发机器(不...

    基于 Vue CLI 搭建 Vue 项目全攻略

    Vue CLI 作为官方提供的脚手架工具,大大简化了 Vue 项目的初始化和构建过程,使得开发者能够快速搭建起一个结构清晰、功能完备的 Vue 项目。本文将详细介绍如何使用 Vue CLI 创建一个 Vue 项目,并对项目的结构和...

    基于webpack搭建vue2.0的脚手架项目

    Vue 2.0是Vue.js的一个重要版本,它带来了许多优化和改进,而Webpack作为现代JavaScript应用的模块打包工具,是构建Vue项目不可或缺的一部分。本篇文章将深入探讨如何基于Webpack搭建Vue 2.0的脚手架项目。 首先,...

    Vue构建项目所需离线文件

    这意味着你可以在没有网络连接的情况下,利用这些预设的配置来搭建和构建Vue项目,这对于开发环境不稳定的场景尤其有用。 Webpack的工作原理是将项目中的模块通过配置文件(通常为`webpack.config.js`)进行解析和...

    uni-app+Vue3+pinia+uview-plus搭建的项目包

    uni-app+Vue3+pinia+uview-plus搭建的项目包!uni-app+Vue3+pinia+uview-plus搭建的项目包!uni-app+Vue3+pinia+uview-plus搭建的项目包!uni-app+Vue3+pinia+uview-plus搭建的项目包!uni-app+Vue3+pinia+uview-...

    手把手教你用vue-cli搭建vue项目

    ### 手把手教你用vue-cli搭建vue项目 在前端开发领域,**Vue.js**作为一款轻量级且功能强大的框架,被广泛应用于构建用户界面。本文将详细介绍如何使用`vue-cli`工具快速搭建一个Vue项目,并对项目结构及常用配置...

    vscode 搭建一个vue项目.doc

    VSCode 搭建 Vue 项目 VSCode 是一个功能强大且灵活的代码编辑器,Vue 是一个流行的前端框架。本资源将指导您如何在 VSCode 中搭建一个 Vue 项目,从安装依赖项到项目的创建和发布。 一、安装依赖项 1. 安装 Node...

    elementUI+vue项目搭建

    Vue CLI(命令行工具)是Vue.js的官方脚手架,它可以帮助我们快速地初始化一个Vue项目,生成项目结构并自动化配置,大大提高开发效率。 Element UI 是一套为开发者、设计师和产品经理准备的基于Vue 2.0的组件库,...

    Vue项目从头搭建

    Vue项目从头搭建 在本篇文章中,我们将从头开始搭建一个 Vue 项目。 Vue 是一个基于 JavaScript 的渐进式框架,用于构建用户界面。它提供了一个灵活的架构,可以满足各种类型的项目需求。 一、安装 Node.js 在...

    搭建基础vue项目模板

    搭建基础vue项目模板

    用vuecli3搭建的vue项目脚手架

    VueCLI3是Vue.js官方提供的一个快速搭建复杂前端应用的脚手架工具,它极大地简化了Vue项目的初始化过程,提供了丰富的预设和插件机制,让开发者能够专注于编写业务代码而不是配置环境。在这个名为"vue-vuex-router-...

    搭建vue环境并启动项目.pdf

    在开始搭建Vue开发环境之前,我们需要确保计算机上已经安装了Node.js,因为Vue的构建、管理和运行都离不开Node的npm(Node Package Manager)工具。首先,从官方网站(如http://nodejs.cn)下载适合您系统的Node.js...

    Vue CLI 3.x搭建Vue项目

    Vue CLI 3.x 是一个强大的工具,用于快速搭建 Vue.js 项目。Vue CLI 提供了一种标准化的方式来创建、构建和管理 Vue 项目,极大地提高了开发效率。在这个过程中,我们需要确保已安装了 Node.js 和 Git,因为它们是...

    使用scss搭建的vue项目完整架构

    vue结合scss搭建的项目,比较完整,是我从公司现有架构的基础上抽出来,并进行简化

    搭建一个vue项目

    "搭建一个Vue项目"是每个初学者必须经历的第一步,这涉及到Vue项目的初始化、配置、路由设置以及组件化开发等多个环节。下面将详细介绍这些知识点。 首先,创建Vue项目通常会借助官方提供的`Vue CLI`(命令行工具)...

    使用Vue2VuexVueRouter2WebpackAxios搭建vue框架

    Vue2、Vuex、VueRouter2、Webpack和Axios是搭建Vue.js项目时常用的工具和技术栈,它们各自承担着不同的角色,共同助力构建功能强大的单页应用程序(SPA)。 Vue2是Vue.js的第二代版本,它引入了虚拟DOM、组件化、...

    Vue项目搭建 .xmind

    Vue项目搭建 .xmind

    搭建vue开发环境.docx

    在本文中,我们将详细介绍搭建 Vue 开发环境的步骤,包括安装 Node、WebStorm、 Vue 项目的创建和启动。 一、工具安装 在开始搭建 Vue 开发环境之前,我们需要安装一些必要的工具。首先,我们需要安装 Node.js。 ...

Global site tag (gtag.js) - Google Analytics