win10 + vs code + vue 环境搭建

最新推荐文章于 2024-12-05 11:42:44 发布

tang_jian_dong

最新推荐文章于 2024-12-05 11:42:44 发布

阅读量1.1k

点赞数 1

分类专栏：程序人生

程序人生专栏收录该内容

200 篇文章 2 订阅

订阅专栏

第一步： node.js官网下载安装, 安装目录别装C盘就行： https://nodejs.org/en/download/

第二步：在nodejs安装路径下，新建node_global和node_cache两个文件夹

设置缓存文件夹：

npm config set cache "F:\node.js\install\node_cache"

设置全局存放路径：

npm config set prefix "F:\node.js\install\node_global"

然后在C:\Users\[你的用户名]下用记事本打开.npmrc文件确定如下图所示就说明设置成功了。

三、基于 Node.js 安装cnpm（淘宝镜像）

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

安装后用 cnpm -v 查看安装是否成功：先执行下一步的环境变量配置

四：设置环境变量：

1：用户环境变量：

2：系统环境变量

第五步：安装webpack (js 应用程序的静态模块打包器（module bundler）)

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）, 其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle

Vue的组件是.vue或者 .wxml等文件，无法被浏览器解析，需要被翻译和打包为.js文件，输入: cnpm install webpack -g

完成后在F:\node.js\install\node_global\node_modules目录下可看到webpack文件夹和它的文件了

第六步、安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g

安装完成后node_global可看到vue的六个文件。

七：命令创建vue项目， cmd下进入存放项目的路径：输入： vue init webpack 你项目名称

重要的一点是最后要选择 No， I will handle that myself 也就是创建完项目后由我自己来下载依赖

注意：由自己下载依赖会存在缓存问题，当复制到另一台电脑后会有依赖为空的现象。如果直接下载依赖就不会有这种问题

创建完毕后在目录下就出现了新建的项目：

目录说明：

安装依赖： cd vue-demo 输入 cnpm install

下载安装项目的依赖(注意不是用的npm，而是cnpm，这样快些)，完成后可在目录中看到所有有依赖，如下图

输入cnpm run dev(注意不是用的npm，而是cnpm)后会给出提示让我们在浏览器通过http://localhost:8080地址访问。

安装 vs code ，官网：https://code.visualstudio.com/Download

安装过程下一步下一步别装C盘就行。

其他优化和插件的安装就另外百度就ok了。

vs code 选择打开文件夹，找到创建的项目就能导入项目了。

在菜单查看 > 调试控制台 > 输入命令 npm run dev

然后 localhost:8080就可以访问了

不想命令创建项目的话也可以，在存储项目的路径下新建一个文件夹。然后新建一个index.html, 引入vue.js 就可以测试学习了。让html文件在 vscode中运行的话就是在扩展搜索 view in browser, 安装完毕点击重新加载，在index.html 右键view in browser 就在浏览器运行了。

安装prettier插件，是代码格式化工具，在扩展工具搜索 prettier ，然后安装

引入 bootstarp

1:先导入 jquery

 npm install jquery --save-dev

在入口文件index.js 李曼添加内容

import $ from 'jquery' ;

测试一下是否安装成功，看看能否弹出'123'

复制代码

<template>
  <div>
   Hello world！
  </div>
</template>

<script>
$(function () {  
    alert(123);  
 }); 

export default {
  
};
</script>

<style>

</style>

2:安装bootstrap

npm install --save-dev bootstrap

在入口文件index.js里引入相关

import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/js/bootstrap.min.js';

添加一段Bootstrap代码

    <div class="btn-group" role="group" aria-label="...">  
      <button type="button" class="btn btn-default">Left</button>  
      <button type="button" class="btn btn-default">Middle</button>  
      <button type="button" class="btn btn-default">Right</button>  
    </div>

运行，查看效果

引入 element-ui

cnpm i element-ui -S

在main.js中引入elementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

安装axios

cnpm install axios --save

安装qs

npm install --save axios vue-axios qs

import qs from 'qs' qs 用来解决vue中post请求以 a=a&b=b 的格式

在main.js 中引入文件为全局使用

参考：

https://blog.csdn.net/junshangshui/article/details/80376489

https://www.cnblogs.com/zhaomeizi/p/8483597.html

vue 解决关于*!!vue-style-loader!css-loader?{"sourceMap":true}!../../../../vue-loader类似问题的方法：

https://blog.csdn.net/genius_yym/article/details/82222424

ERROR in Cannot find module 'node-sass'（已解决）

ERROR in Cannot find module 'node-sass'

错误表示找不到node-sass模块。

因为cnpm安装导致的，换成npm安装就好

或者cnpm install node-sass@latest

解决方法：

输入命令：cnpm install node-sass@latest