vue-webstrom环境搭建

一.下载安装node.js

官网:https://nodejs.org/en/download/

修改存储路径后一直next即可。

win+r  cmd 输入 node -v   >  返回版本号 安装成功。

二.基于node.js安装cnmp(淘宝镜像)

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

输入 cnpm -v   >  返回版本号 安装成功

三.安装vue

cnpm install vue -g

四.安装脚手架

cnpm install --global vue-cli

五.新建vue项目

webstrom-File-new-Project-vue.js

六.安装组件

cnpm install

七.运行vue项目

npm run dev

如果报错显示missing script: dev  找到文件“package.json”,打开 找到文件中下面的内容,将"serve" 改为“dev”,即可。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装Node.js和npm 首先需要安装Node.js和npm,可以从官网下载安装包进行安装。安装完成后,可以打开终端或命令行窗口,输入以下命令检查是否安装成功: ``` node -v npm -v ``` 如果输出了版本号,则说明安装成功。 2. 创建项目 可以使用vue-cli创建一个新的Vue项目。打开终端或命令行窗口,输入以下命令: ``` npm install -g @vue/cli vue create my-project ``` 其中,my-project为项目名称,可以根据实际情况修改。 在创建项目时,可以选择使用默认配置,也可以根据需要进行自定义配置。 3. 安装vue-next-admin 在项目目录下,打开终端或命令行窗口,输入以下命令安装vue-next-admin: ``` npm install vue-next-admin ``` 安装完成后,在项目的src目录下,创建一个名为main.js的文件,并添加以下代码: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueNextAdmin from 'vue-next-admin' Vue.use(VueNextAdmin) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 4. 运行项目 在项目目录下,打开终端或命令行窗口,输入以下命令启动项目: ``` npm run serve ``` 启动成功后,可以在浏览器中访问http://localhost:8080/,看到vue-next-admin的登录页面。 5. 配置路由和菜单 可以在项目的src目录下,创建一个名为router.js的文件,并添加以下代码: ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import Layout from './views/Layout.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Layout, children: [ { path: '', component: Home } ] } ] }) ``` 在此基础上,可以根据需要添加更多的路由和菜单。 6. 配置Vuex 可以在项目的src目录下,创建一个名为store.js的文件,并添加以下代码: ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 在此处添加全局状态 }, mutations: { // 在此处添加全局状态变更方法 }, actions: { // 在此处添加异步操作方法 }, modules: { // 在此处添加模块 } }) ``` 在此基础上,可以根据需要添加更多的状态和方法。 7. 配置API 可以在项目的src目录下,创建一个名为api.js的文件,并添加以下代码: ```javascript import axios from 'axios' const api = axios.create({ baseURL: 'http://localhost:3000', // API基础路径 timeout: 5000 // 超时时间 }) export const login = params => api.post('/login', params) // 登录API export const logout = () => api.get('/logout') // 登出API export const getUserInfo = () => api.get('/user/info') // 获取用户信息API ``` 在此基础上,可以根据需要添加更多的API。 8. 配置Mock 可以使用mockjs模拟后端接口数据,可以在项目的src目录下,创建一个名为mock.js的文件,并添加以下代码: ```javascript import Mock from 'mockjs' Mock.mock('/login', 'post', { code: 0, data: { token: Mock.Random.guid() } }) Mock.mock('/logout', 'get', { code: 0 }) Mock.mock('/user/info', 'get', { code: 0, data: { name: 'admin' } }) ``` 在此基础上,可以根据需要添加更多的接口数据。需要注意的是,使用Mock时需要在main.js中导入mock.js文件: ```javascript import './mock' ``` 9. 打包项目 在项目目录下,打开终端或命令行窗口,输入以下命令打包项目: ``` npm run build ``` 打包完成后,可以在项目的dist目录下找到生成的静态文件。 以上就是vue-next-admin环境搭建的全部步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值