码迷,mamicode.com
首页 > 其他好文 > 详细

Vue之cli脚手架

时间:2020-07-07 19:53:39      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:public   工具   npm   conf   成功   全局   ogr   查看   一点   

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • 可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

二、安装

1、需要先安装node.js

node -v查看安装版本

npm -v 查看版本

2、配置两个目录,指定「全局模块的安装目录」、「缓存目录」:

npm config set prefix "D:\nodejs\node_global",将来全局安装的东西就会跑到这个文件夹的node_modules文件夹里面去了。

npm config set cache "D:\nodejs\node_cache"

3、安装淘宝镜像cnpm,代替npm(其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。)

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

如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"

4、安装vue-cli

cnpm install -g vue-cli   :-g表示安装到global全局目录去,2.x

vue -V查看版本

cnpm install -g @vue/cli  :安装最新版本,3.x

5、安装vue-router

npm install vue-router -g

三、创建项目

需要在相应项目的文件夹下操作

1、通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:

vue init webpack

注:

vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。

vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录(如果修改了配置,可以查看文档,用cli3的方法进行配置)。

2、确认创建项目后,还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等。

技术图片

 

 

 

3、安装顺利执行后会,生成如下文件目录

技术图片

 

 

 

 

 4、生成文件目录后,使用 cnpm 安装依赖:

cnpm install

技术图片

 

 

 

5、最后需要执行命令: npm run dev 来启动项目,启动完成后会自动弹出默认网页:

注:如果未自动弹出,找到生成的文件夹里的config/index.js文件,打开把 autoOpenBrowser: false,的false改成true

技术图片

 

 

 

6、打包

npm run build

下图为打包生成的dist文件夹,其中index.html为入口文件:

技术图片

 

 

 

这时,打开了index.html文件,发现网页一片空白,打开F12发现console报了几个错误,状态码为404

这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了。

需要修改的文件在项目目录下的config文件夹里的index.js文件

技术图片

 

 

 改完后,重新执行npm run build,成功。

 

Vue之cli脚手架

标签:public   工具   npm   conf   成功   全局   ogr   查看   一点   

原文地址:https://www.cnblogs.com/dangjf/p/13262535.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!