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    // 项目基本信息

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

未经允许不得转载:创之梦博客 » Vue-cli脚手架的详细安装环境

赞 (1)
分享到:更多 ()

欢迎各位吐槽评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址