vue项目框架搭建

关键词：

1、安装node.js

直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/ ，在安装完node之后npm包管理工具也自动的安装好，安装完之后，在命令行输入node -v或者npm -v，出现版本号说明安装成功。如下图所示：

 

2、改变原有的环境变量
(1)配置npm的全局模块的存放路径以及cache的路径，在nodejs的主目录下新建"node_global"及"node_cache"两个文件夹，例如两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置。

 

 

 然后输入如下两个命令：

npm config set prefix “E:commontool odejs ode_global”
npm config set cache “E:commontool odejs ode_cache”

（2）在node_global文件夹下新建node_modules文件夹，系统环境变量Path中添加路径E:commontool odejs ode_global ode_modules，此后所安装的模块都会安装到改路径下。

（3）在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到global目录下，也就是上面说设置的“E:commontool odejs ode_global”里面。）

    npm install express -g
   安装完毕后可以看到. ode_global ode_modulesexpress 已经有内容

 

 

 （4）控制台cd进入E:commontool odejs ode_global ode_modulesexpress路径下，在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块：
require(‘express’)  ，假设成功，可以看到有输出。假设出错，检查NODE_PATH的路径。

3、安装淘宝npm（cnpm）

(1)输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

(2)添加系统变量path的内容
因为cnpm会被安装到E:commontool odejs ode_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm;如下图配置：

 

 

 

 (3)输入cnpm -v输入是否正常。

4、vue-cli的搭建

打开cmd ,敲入命令：
npm install --global vue-cli （–global：全局安装）

安装成功后输入vue -V出现版本号证明安装成功。

 

 

 5、vue项目的搭建

（1）开始生成项目，在本地硬盘找一个目录存放代码，然后打开命令行cd切换到相应的路径下，然后跑 vue init webpack Vue-Project（项目名称）

 

 

 （2）输入cd Vue-Project  然后安装依赖npm install, 如果平常时开发就跑npm run dev(本地开发跑代码)，如果需要打包则跑npm run build。

 

 

 （3）项目默认监听的是8080端口，在项目下打开config文件夹，打开index.js可以找到项目监听端口，可以修改。

 

 

 （3）跑下指令npm run dev   ,然后再地址栏输入http://localhost:8888,就会出现相应的页面。

 

 

 （4）添加相应的框架以及依赖

npm i axios --save

npm i vue-router --save

npm normolize.css --save

npm i lodash --save

npm i style-loader --save

npm i sass-loader --save(安装成功后需要将package.json中的sass-loader版本改为7.0.0)

cnpm i node-sass --save(此处用cnpm)

npm i file-loader --save

npm install element-ui -S

 

参考：https://www.jb51.net/article/129463.htm

https://blog.csdn.net/wolf_tuteng/article/details/104233836

 

使用vue+jfinal框架搭建前后端分离系统(代码片段)

...本文基于Vue.js和JFinal框架，给出了搭建了一个前后端分离项目的简单例子。第一步：maven搭建后端JFinal部分1、用maven新建web项目，项目名vue-jfinal2、添加JF 查看详情

1.vue项目搭建，基于elementui的pc端框架

参考技术Avuelistvueinitwebpack项目名称npminstallnpmrundevnpmielement-uiimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) 查看详情

搭建vue的脚手架框架

首先，第一步，新建个项目文件夹shift+鼠标右键选择打开命令窗口npminstall-gvue-cli然后安装好了之后新建个项目的目录vueinitwebpacktestProjectname这里可以输项目名称Projectdescription这里可以输项目的描述然后就一直回车Installvue-router这... 查看详情

vue项目ide（vue项目环境搭建）

一、先介绍一下我接下来要做的项目项目：ide可视化工具技术应用：　　Vue2.0（js框架）：https://cn.vuejs.org/　　ElementUi（饿了吗ui框架基于vue的）：http://element.eleme.io/#/zh-CN　　Ecahrts（图表）：http://echarts.baidu.com/　　vue-power-drag（... 查看详情

vue项目搭建记录

这几天一直在学习Vue.js框架。因为以前没有前端项目的经验，也没学过什么前端框架，所以，对于vue.js的学习有些不知所措。在vue.js官网看教程，按照教程指点，可以不用脚手架开发，也可以搭建开发环境。这里记录下搭建过程... 查看详情

vue项目搭建及原理一

...、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。vue+vuex+vue-resource+vue-router+webpack 查看详情

vue项目搭建过程

vue项目搭建过程想用vue3+ts给自己搭一个网站因为之前从来没有做过项目搭建的工作，所以想记录一下这个搭建过程构建vue运行环境这个很简单了，安装git，下载node，改npm源什么的查看npm源npmgetregistry修改npm源npmconfigsetregistryhttps:... 查看详情

django框架（三十）——使用vue搭建前台(代码片段)

目录vue的使用一、创建vue项目二、pycharm开发vue项目1、安装vue.js插件2、运行vue项目三、vue项目的目录结构四、vue的使用1、创建新的组件2、显示数据3、方法的绑定五、axios1、安装axios2、使用axiosvue的使用一、创建vue项目参考另一... 查看详情

vue2项目结构搭建

vue2项目结构初搭建与项目基本流程一、开始项目结构搭建的重要性决定项目是否能够健康成长决定了项目是否利于多人协作开发决定了项目是否利于后期维护决定了项目是否性能良好决定了代码是否重用率降低二、项目结构的... 查看详情

vue项目搭建(代码片段)

vue项目搭建（一）由于一直想要有自己的框架，因而一直在尝试搭建各类结构，结合vue官网及git上大神bailicangdu的项目，再看看网上一些意见，及个人思考，总结的一些，不到之处希望大家可以帮我指证，必定虚心接受技术栈：v... 查看详情

vue开发（开发环境+项目搭建）

...注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。  首先vue.js的作者是中国人，所以说他是国产的，吸收了google... 查看详情

基于php语言laravel9+vue+elementui搭建的web项目框架

项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情

工作经验vue项目框架搭建(代码片段)

【背景】  最近小编在工作过程中经历了项目的前后端框架搭建和项目前端、后端的打包部署，个人觉得还是挺重要的，所以总结一下。本篇博客主要介绍一下前端Vue项目框架的搭建（并非权威，可能有错漏... 查看详情

工作经验vue项目框架搭建(代码片段)

【背景】  最近小编在工作过程中经历了项目的前后端框架搭建和项目前端、后端的打包部署，个人觉得还是挺重要的，所以总结一下。本篇博客主要介绍一下前端Vue项目框架的搭建（并非权威，可能有错漏... 查看详情

使用vue-cli脚手架搭建简单项目框架

1.首先已经安装了node,最好版本6以上。2.安装淘宝镜像大家都知道国内直接使用npm的官方镜像是非常慢的，这里推荐使用淘宝NPM镜像。这样就可以直接使用cnpm了。npminstall-gcnpm--registry=https://registry.npm.taobao.org如果过程出差，是否安... 查看详情

vue项目环境的搭建

...，好了废话不多说开始！！当我们使用脚手架创建了一个项目之后（如何创建项目我上一篇博客里面有详解）。我们就可以开始配置一些项目所依赖的技术，以便于项目开发更加便捷。一、集成路由的配置：1、要配置集成路由... 查看详情

vue项目框架搭建

好不容易弄个博客不知道写啥，随便找了个文档试下效果。。。。1.安装nodenode下载地址:https://nodejs.org/zh-cn/download/node安装会默认装好npm检验node，npm安装成功否node-vnpm-v2.安装淘宝镜像（cnpm）npminstallcnpm-g--registry=https://registry.npm.ta... 查看详情

vue—前端框架

...Vue实例三、生命周期钩子四、Vue指令五、组件六、Vue-CLI项目搭建Vue渐进式JavaScript框架通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目一、走进Vue1、what--什么是Vue... 查看详情