美文网首页
第一个vue项目构建

第一个vue项目构建

作者: my沙漠玫瑰 | 来源:发表于2018-07-26 15:56 被阅读0次

1、安装node环境,去node官网上下载,如果需使用git,window系统建议下载一个git.exe,使用gitbash;

2、安装npm,建议安装cnpm淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org

cnpm -v查看版本

3、安装vue脚手架 cnpm install -g vue-cli

4、配置vue环境变量(目的是为了在计算机的其他目录下也可以使用vue命令,初始化vue项目)

vue -V可以查看是否安装及配置成功

步骤:

计算机右键——属性——高级设置——最下面环境变量——在path路径后面拼接vue.cmd的路径

注:在安装脚手架的过程中会提示vue.cmd的安装目录,也可以脚手架安装成功后全局搜索vue.cmd,复制路径拼接到path项后面即可,记得以分号间隔

5、 vue init webpack myweb (初始化一个vue项目,myweb是我起的项目名,项目名不能使用大写英文字母)

Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式,一般默认选择第一种

Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装

6、安装依赖cnpm,下载到该vue项目中,用cnpm  run dev来启动项目

7、默认是8080端口,如果端口被占用会报错,可以在config文件夹下的index.js中更改端口,我用的是8000端口

8、启动项目初始页面cnpm run dev,可能会出现不自动打开浏览器运行项目,如下

此处告知了项目的运行地址,在地址栏输入地址即可查看项目,将autoOpenBrowser: false,改为true即可自动打开浏览器运行项目,如图

注:建议关闭命令窗口重新运行,因为配置文件更改了,否则可能不起作用

9、最终效果

相关文章

  • Vue+Element-UI构建项目

    vue-cli构建基于webpack的项目 使用vue-cli构建项目vue init webpack proje...

  • Vue.js学习笔记(1)

    使用脚手架创建第一个vue工程 项目文件结构 build:项目构建(webpack)相关代码 config:配置目...

  • vue系列教程(一) 搭建与部署

    一 vue-cli构建项目 vue-cil构建项目:查看官网 vue-cli是vue脚手架工具,极其方便开发,可以...

  • Vue 学习笔记

    1. 使用vue-cli3构建项目 全局安装 vue-cli3 查看 vue-cli 版本 快速构建项目 使用 v...

  • 14 -vue 打包图片路径错误解决

    一、构建 VUE 项目 直接用官网的方式建立vue 项目 二、打包 VUE 项目 2.1 打包项目介绍 会在项目...

  • vue+webpack构建项目(小白)

    之前自学过vue,构建项目直接用vue-cli,最近在学习如何自己构建项目,于是就选择了vue+webpack(本...

  • Vue-cli基础梳理

    Vue-cli是vue官方出品的快速构建单页应用的脚手架。 1.vue-cli项目目录结构 build项目构建(w...

  • Vue+Cordova环境搭建

    1、安装node.js 2、安装vue-cli脚手架构建工具 3、用vue-cli构建项目 4、运行vue项目 5...

  • vue webpack 包管理与配置项

    vue-cli 构建项目,以下是 vue-cli 3 构建的基础模型: name : 项目名称也就是包名称,命名规...

  • 初始化一个vue项目

    1、全局安装@vue/cli npm install -g @vue/cli 2、构建Vue项目 vue crea...

网友评论

      本文标题:第一个vue项目构建

      本文链接:https://www.haomeiwen.com/subject/tlkbmftx.html