vue 安装详情

1 安装最新版 node,js

2 安装 git

3 打开 git-bash

npm install vue-cli -g安装 vue命令环境
验证安装ok?
vue --version
生成项目模板
vue init <模板名>
(模板用 webpack-simple) 本地文件夹名称
进入到生成目录里面
cd xxx
npm install
npm run dev

-------------------------------------------------------------------------------------------------------------------

路由安装

http://router.vuejs.org/zh-cn/index.html

cnpm install vue-router --save-dev

main.js配置

import VueRouter from 'vue-router'
Vue.use(VueRouter)

路由设置的JS 写在 main.js里面

例子:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueRouter from 'vue-router'




Vue.use(VueRouter)


Vue.prototype.$http = axios


//------------------------------------------------
//路由例子
        
var Home={
   template:'<div>'+
    '<h3>我是主页</h3>'+
    '<p>哈哈</p>'+
    '</div>'
};
var News={
   template:'<h3>我是新闻</h3>'
};


//配置路由
const routes=[
   {path:'/home', component:Home},
   {path:'/news', component:News},
   {path:'*', redirect:'/home'}
];


//生成路由实例
const router=new VueRouter({
   routes
});
 //------------------------------------------------ 


new Vue({
  router,   //路由挂载
  el: '#app',
  render: h => h(App)
})

-------------------------------------------------------------------------------------------------------------------

想进行数据交互 用 axios

1 git-bash 下载  cnpm i axios --save-dev

2 打开 main.js 进行添加

import axios from 'axios'
Vue.prototype.$http = axios

-------------------------------------------------------------------------------------------------------------------


如果想网速快 可用 cnpm

1 打开git-bash

   输入   

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

### 如何在 Vue 项目中正确安装依赖项 在 Vue 项目中,无论是使用 `npm` 还是 `yarn` 来管理依赖项,都需要遵循一定的最佳实践来确保项目的稳定性和可维护性。 #### 清理旧的依赖并重新安装 如果遇到依赖冲突或者环境异常的情况,可以尝试清理现有的 `node_modules` 文件夹以及缓存数据后再重新安装依赖。这可以通过以下方式实现: ```bash rm -rf node_modules package-lock.json npm cache clean --force npm install ``` 这种方式能够有效解决因本地模块损坏或版本不一致引起的问题[^1]。 #### 处理 peerDependencies 冲突 当某些库存在 `peerDependency` 要求时,可能会因为版本兼容问题而导致错误。此时可以在安装命令后面附加参数 `--legacy-peer-deps`,从而忽略这些约束条件继续完成安装过程。例如,在安装 Vue 插件或其他第三方组件时可能需要用到这种方法: ```bash npm install vue-router@next --legacy-peer-deps ``` 此方法已被证明对于许多开发者来说非常实用[^2]。 #### 正确设置开发环境 为了更好地管理和运行 Vue 应用程序,建议按照官方文档推荐的方式搭建完整的开发流程。通常情况下包括以下几个方面的工作准备: - **安装 Node.js**: 确保全局环境中已经具备合适的 JavaScript runtime 版本支持。 - **初始化项目结构**: 利用脚手架工具如 Vue CLI 创建标准化目录布局。 - **执行基础构建任务**: 借助内置脚本来预览应用效果或是打包发布成品资源文件等操作步骤说明见参考资料[^3]。 #### 高级场景下的多版本依赖处理 针对特殊需求比如需要在同一工程里引入不同版本号的 ECharts 图形展示库,则可通过 alias 技巧达成目标。即修改 Webpack 加载器解析规则使得特定路径指向指定位置上的自定义副本实例而不是默认加载单一共享版次的内容。具体做法如下所示: ```javascript // webpack.config.js 中配置 resolve.alias 属性 resolve: { alias: { 'echarts$': path.resolve(__dirname, './node_modules/echarts/dist/echarts.min.js'), '@anotherEchartsVersion': path.resolve(__dirname, './custom-modules/echarts-v4.x') } } ``` 与此同时还需要调整对应的 package.json 文件中的 dependencies 字段以反映新增加的条目详情[^4]。 以上就是关于如何利用 npm 或者 yarn 工具链高效地为您的 VueJS 解决方案添加所需外部功能扩展的一些指导原则和技术要点总结。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值