webpack+vue创建简单项目
来源:互联网 发布:c语言调用函数返回值 编辑:程序博客网 时间:2024/05/17 09:45
webpack+vue创建简单项目
– 安装nodejs
用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,
所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:
nodejs安装: http://blog.csdn.net/zzwwjjdj1/article/details/51980082
npm 介绍: http://blog.csdn.net/zzwwjjdj1/article/details/51982433
– 安装命令行工具
npm install -g vue-cli
-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用.
红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,
很快就安装好了.也可以使用cnpm安装.
安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.
– 创建项目框架
vue init webpack my-project
创建一个基于”webpack”的项目,后面是项目名,
按照提示输入,项目名,项目描述,项目作者等等,看到最后这句项目就创建好了,
项目结构:这是安装了依赖以后的截图,没安装依赖以前是没有node_modules文件夹的
刚我们命令行输入的东西就在package.json这个文件里,打开文件
项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.
– 安装依赖
生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,
ctrl+c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令npm install 安装
同样是使用淘宝镜像.
当这个命令运行完成以后会多出一个node_modules文件夹,里面就是项目所需的所有依赖,
可以看到有很多模块,这些模块都是在package.json文件里定义好了的.
dependencies是项目依赖,
devDependencies是开发时项目依赖.
– 运行测试
好了,依赖安装完成后就可以运行我们的项目了命令:
npm run dev
看到这样的输入项目就运行起来了,然后打开浏览器,输入第二个红框的地址 localhost:8080,
浏览器截图.
阅读全文
0 0
- webpack+vue创建简单项目
- webpack+vue创建简单项目
- webpack+vue创建简单项目
- webpack+vue创建简单项目并整合iview
- vue+webpack项目创建过程
- Webpack创建、运行vue.js项目
- webpack的简单配置vue项目
- vue+webpack项目实战
- Vue +webpack 项目
- webpack 构建Vue项目
- webpack + vue项目搭建
- vue + webpack 构建项目
- vue + webpack 构建项目
- 初识 webpack vue项目
- Vue + webpack 项目实践
- Webpack创建、运行vue.js项目及其目录结构详解
- Vue-webpack环境的搭建及项目的创建
- Webpack创建、运行vue.js项目及其目录结构详解
- 51nod 1307 绳子与重物 (标记父节点更新即可)
- OkHttp的一些封装
- 深入浅出JMS(二)--ActiveMQ简单介绍以及安装
- Java初学者的学习路线建议
- 记录一个 DELETE_FAILED_INTERNAL_ERROR Error while Installing APK问题
- webpack+vue创建简单项目
- gomicro微服务系列之二
- 计算机网络第1章 概述
- scp命令
- python可变类型与不可变类型
- Linux之CentOS操作系统日常问题(二):catalina.out占用内存大的问题
- PowerDesigner基础使用
- IS-IS 不同报文应用TLV
- 两个git账号切换403问题