vue项目的环境搭建

前言

此文章涉及到的项目搭建已摆脱了所有因为搭建环境遇到的坑,希望对大家有用,能节省大家时间,快乐的学习

废话不多说,具体如下!!!

安装Node环境

1、安装node.js


下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。

检验是否安装成功,在cmd输入命令 node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功


2、安装vue-cli

打开cmd命令行工具,输入npm install -g vue-cli,回车 全局安装vue-cli

构建vue-cli项目

1、创建项目

打开cmd,进入想要创建项目的目录下,输入:vue init webpack projectname

webpack默认是安装2.0版本,若要安装1.0版本,需在webpack后面加上版本号信息,

vue init webpack#1.0 project-name(安装1.0版本)

projextname是自定义的项目名称

例:我这里命名为vuedemo

(PS:如果你的安装的是vue3.0,你得安装一个桥接工具:npm install -g @vue/cli-init

这样vue3.0和2.0的命令都可以用)


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这两个是测试,可以不用安装

2.安装依赖

项目创建完成,打开文件夹可以看到目录结构如下


此时,项目已经初具雏形,但还未安装依赖,需打开cmd,进入项目所在根目录下,输入npm install,回车


我们此时再打开项目文件夹,可以看到多了node_modules文件夹,里面是各种需要的依赖包

3.运行项目

打开cmd,进入到项目所在目录下,输入npm run dev,回车,启动项目


启动成功后

访问 http://localhost:8080
可以在浏览器看到如下画面,恭喜你,已成功构建vue-cli项目,接下来就可以开始开发啦


4、项目开发完后打包

在项目目录下,执行npm run build,如图:


打包后项目中会多出来一个dist文件,如图:

dist文件中打开index.html就是你的vue项目打包的页面。

PS:

如果打包后的Index打开后为空白页面,你就得再配置下项目中的地址

1、打开项目下build文件utils.js,修改如图

在对应位置添加publicPath: '../../'

2、打开项目下build文件webpack.prod.conf.js,修改如图

在对应位置添加publicPath: './'

3、打开项目下config文件index.js,修改如图

assetsPublicPath: ''修改为assetsPublicPath: './'

保存上述修改后,重新打包npm run build

生成的dist中的Index.html就可以打开浏览了

vue项目搭建到打包就完成了,多谢大家参考支持

你可能感兴趣的:(vue项目的环境搭建)