当前位置: » Vue专题,技术分享 » Vue-cli脚手架的详细安装环境

Vue-cli脚手架的详细安装环境

本文共2014个字,预计阅读6分钟。

Vue-cli脚手架的详细安装环境
Vue-cli脚手架的详细安装环境

搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧。学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的….

1.安装node.js (安装网址点击下面链接)

node.js下载网址:http://nodejs.cn/

安装完以后,先打开Dos窗口,输入以下命令,查看安装的版本

node -v

npm -v

Node.js是个啥人家首页都写着呢,这里不做解释了哈。

2.安装vue的脚手架

全局安装vue-cil,也就是所谓的脚手架(不要觉得有什么高大尚的也就是如此而已)

1)用npm安装(国际开源库生态系统)

2)用cnpm安装(使用国内镜像安装)

使用淘宝镜像安装(安装node.js 自带npm)

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

检查是否安装上(cnpm -v)

2. 用cnpm安装vue脚手架

cnpm install -g vue-cli

最后检查自己是否安装上:(vue -V)记住这里的-V是大写字母V,出不来可不要懒我,我可不会管你

特别注意:

1.如果提示“无法识别”,有可能是npm的版本过低。

解决办法:npm install -g npm(更新一下版本就好了)。

2. 如果安装失败的话。

解决办法:npm cache clean(清除一下缓存就好了)

3.生成项目(*重点)

首先在命令行下,需要用cd指令进入项目目录进行搭建项目的文件夹

1.安装vue-cli (方式二)

cnpm install vue  -S (依赖) / -g(全局配置)

2.生成项目模板,初始化项目

vue init webpack project(项目名称)

3.进入当前项目 安装模块包

npm install(这样就完成了)

4.最后就是启动项目了

npm run dev

在浏览器上输入启动后的显示的地址:localhost:8080就可以打开了(可以开始写项目了)


特别注意:

如果浏览页面打不开或者是没有加载页面,有可能是本地8080端口被占用,又或者是你关闭了这个窗口。

解决办法:

针对第一种情况:修改配置文件就好了

打开项目找到config>index.js

建议将端口号改为不常用的端口(例如:8075 8081等等端口,一般情况默认的端口号是8080)。

对于第二种情况:重启一下JavaScript的运行环境就好了,至于怎么启动我就不说了。

4.打包上线

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

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看,项目上线时,只需要将 dist 文件夹放到服务器就行了。

导入文件以后,其文件组织结构如下所示:

各个文件夹的含义如下:

|– build            // 项目构建(webpack)相关代码

|   |– build.js         // 生产环境构建代码

|   |– check-version.js      // 检查node、npm等版本

|   |– dev-client.js        // 热重载相关

|   |– dev-server.js         // 构建本地服务器

|   |– utils.js             // 构建工具相关

|   |– webpack.base.conf.js     // webpack基础配置

|   |– webpack.dev.conf.js      // webpack开发环境配置

|   |– webpack.prod.conf.js     // webpack生产环境配置

|– config           // 项目开发环境配置

|   |– dev.env.js    // 开发环境变量

|   |– index.js     // 项目一些配置变量

|   |– prod.env.js   // 生产环境变量

|   |– test.env.js   // 测试环境变量

|– src           // 源码目录

|   |– components    // vue公共组件

|   |– store        // vuex的状态管理

|   |– App.vue       // 页面入口文件

|   |– main.js       // 程序入口文件,加载各种公共组件

|– static            // 静态文件,比如一些图片,json数据等

|   |– data        // 群聊分析得到的数据用于数据可视化

|– .babelrc           // ES6语法编译配置

|– .editorconfig      // 定义代码格式

|– .gitignore        // git上传需要忽略的文件格式

|– README.md       // 项目说明

|– favicon.ico

|– index.html      // 入口页面

|– package.json    // 项目基本信息

后期配上操作图片也许会更清晰,待续。。。。。

喜欢 0
转载请标明出处:创之梦博客
本文地址:http://52czm.cn/?p=1151
  • 近期文章
  • 标签云
    css3妙用 (8) H5分享 (4) HTML基础 (4) jquery/js特效 (3) Linux服务笔记 (5) MYSQL笔记 (1) php学习 (6) SEO排名 (2) Vue学习 (2) WP主题制作 (27) 博主推荐 (1) 博客有趣挂件 (1) 玩转重装系统 (3) 网站建设 (2) 美文推荐 (2) 随笔录 (3)
  • pomoshh-psihologa-online :

    pomoshh-psihologa-online pomoshh-psihologa-online

  • 创之梦 :

    离大佬还早着,哈哈哈,这个相对比较基础,还有很多东西

  • 程志辉 :

    点赞!!!感觉越来越大佬了

  • 52czm.cn :

    本博客主题个人原创制作,采用wordpress bootstrap4 ,有兴趣的

  • 52czm.cn :

    留言之前自己做美化感觉效果不是很好 所以用了插件实现 推

  • 52czm.cn :

    看文章的时候,js脚本我怕影响加载速度,文章页我就取消了