node,npm,webpack,vue-cli模块化编程安装流程
首先什么都不要管,先装环境。
pip是万能的!!!
安装node: pip3 install node

安装npm: pip3 install npm

安装webpack: npm install webpack

安装vue-cli: npm install vue-cli

安装vuex: npm install vuex

安装axios: npm install axios

至此,我们需要的东西全部安装好了。
接下来就是创建项目:

创建一个文件夹,然后进到这个文件夹里面:
npm init 初始化

vue init webpack vue-demo

现在进盘里看下文件。

可以看到我们在全局设置了环境,但是这里面没有本地node_modules

这个是我创建的第一个项目。
所以下面我们要创建一个node_modules
npm install webpack webpack-cli -D

vue-cli中再配置JQuery、bootstrap:
npm install jquery
npm install bootstrap
接下来就是打包的事情了,第一次打包,没什么经验,文件打包错了,尴尬......

main.js是入口文件,所以我们要找的是index.js文件
node,npm,webpack,vue-cli模块化编程安装流程的更多相关文章
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)
1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法
S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
- webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
新建项目 开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- windows系统下 VUE cli手脚架环境安装
1.安装 node.js环境 (cmd命令工具里输入 node -v 检测是否安装成功) 2.安装VUE 全局环境 npm install --global vue-cli (cmd命令工具里面安装 ...
- vue工具 - vue/cli@3.xx 安装使用流程
mac安装记得npm前边加sudo 安装脚手架,用于生成目录 npm install -g @vue/cli 安装用于编译单个的.vue文件 npm install -g @vue/cli-servi ...
随机推荐
- PhotoView 实现与图片进行简单的交互
本文的category是根据VIPhotoView来做参考,在此基础上添加个加载网络图片. 此category主要功能是与图片进行交互,双击放大图片,捏合等操作. 感谢vitoziv ! VIPhot ...
- 吴裕雄--天生自然C++语言学习笔记:C++ 预处理器
预处理器是一些指令,指示编译器在实际编译之前所需完成的预处理. 所有的预处理器指令都是以井号(#)开头,只有空格字符可以出现在预处理指令之前.预处理指令不是 C++ 语句,所以它们不会以分号(;)结尾 ...
- Marvolo Gaunt's Ring(巧妙利用前后缀进行模拟)
Description Professor Dumbledore is helping Harry destroy the Horcruxes. He went to Gaunt Shack as h ...
- JavaScript的运算符、条件判断、循环、类型转换(9.25 第十一天)
JS的运算符 加 + 减 - 乘 * 除 / 取余 % 自增 ++ 自减 -- 赋值运算符 a=3 a+=3 a=a=3 a-=3 a=a-3 a*=3 a=a*2 a/=3 a=a/3 ...
- CCCC L3-013. 非常弹的球
题意: 刚上高一的森森为了学好物理,买了一个“非常弹”的球.虽然说是非常弹的球,其实也就是一般的弹力球而已.森森玩了一会儿弹力球后突然想到,假如他在地上用力弹球,球最远能弹到多远去呢?他不太会,你能帮 ...
- PHP二维数组--去除指定列含有重复项的数组
给定二维数组: $arr = array( '0' => array('张三',2,3,4), '1' => array('李四',2,3,4), '2' => array('张三' ...
- ng-options用法详解
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-opti ...
- CF 767#
A题的话,用一个priority_queue维护一下,直到最大的符合要求才出来,,(一开始记错了,,2333写成了小根堆...) #include<bits/stdc++.h> #defi ...
- 修改虚拟机ip
在命令行里输入:more /etc/sysconfig/network-scripts/ifcfg-eth0 (注意more后要空一格,还有eth0,最后是数字零). 然后再输入:ifconfig ...
- 二十四、CI框架之URL辅助函数
一.控制器代码如下: 二.view的显示代码中,关于路径,我们可以用另外一种方法来写, 如: "/CodeIgniter-3.1.10/index.php/welcome/add" ...