搭建vue前端项目

1. 确认安装nodejs

2. 确认安装npm

3. 国内npm下载依赖的速度太慢，淘宝镜像cnpm速度快，所以注册cnpm代替npm。

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

4. 安装vue-cli

cnpm install -g vue-cli

5. 初始化项目，打包工具选择webpack，项目名称：vue-test-ui

vue init webpack vue-test-ui

6. 接下来，填写一些信息，可以直接enter。

Project name 项目名
Project description 项目名描述
Author 作者邮箱
Use ESLint to lint your code? 是否需要ESlist语法检查
Setup unit tests with Karma + Mocha? 是否需要单元测试
Setup e2e tests with Nightwatch? Yes是否需要e2e测试

7. 这一项可以选择yes，也可以选择no。

选择yes使用npm install命令安装，选择no，自行使用cnpm install命令安装。

8. 出现这个就可以启动项目了

9. 启动项目

cnpm run dev

10. 访问项目http://localhost:8080/#/

11. 打包项目

cnpm run build

原文地址：https://www.cnblogs.com/liubingfei/p/12342048.html

时间： 2024-10-10 10:00:37

搭建vue前端项目的相关文章

vue前端项目开发环境搭建并用npm方式运行

1.下载node.js http://nodejs.cn/download/ 推荐下载 .mis安装包,下一步下一步... 安装完后,通过cmd控制台输入node -v 弹出版本号即成功 2.通过node.js中内置的npm(包/依赖)插件来下载其他开发所需的环境注意:如设置了代理限制,可通过cmd控制台输入npm config set proxy=http://代理服务器地址:8080 设置代理(网络有代理限制时下载不到依赖包时,按需设置) npm config delete proxy 为

vue-cli3 搭建的前端项目基础模板

基于 vue-cli3 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言:less Ajax: axios,做了一定的封装,详见 src/services/request.js SVG 雪碧图:采用 webpack 插件 svg-sprite-loader,及 svg 精简压缩工具 svgo 移动 web 的适配方案:引入了 postcss-pxtorem 及 lib-flexible,可以自由地

Angular01 通过angular-cli来搭建web前端项目

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见三少的博客(开发基础分类) 1 新建一个文件夹该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件三少使用sublime打开的效果如下 4.1 代码详解这就是一个html文件我们的应用会在app-root

如何实现vue-cli搭建的前端项目的自动打包

实现vue-cli + webpack +vue项目的自动打包: 后台java代码: public class OpenDirectory { public static void main(String[] args) throws IOException { String url = "F:\\Aomsc\\"; Runtime.getRuntime().exec("cmd /c start "+url+"a.bat");//通

VUE 前端项目优化方法

前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通过下面的方法对前端项目进行优化,减小打包后生成的js大小,从而提高加载速度.下面以USM项目为例,进行优化: 一.公用静态资源通过CDN加载目前所有项目都通过npm包的形式引入vue.vue-router.axios.vuex.element-ui.ucar-view这些第三方包,webpack打

【vue】创建一个vue前端项目，编译，发布

[一]mac检查是否安装node.js nvm --version =>0.33.9 node -v =>v10.7.0 [二]安装vue-cli cnpm install --global vue-cli [三]创建一个vue项目.基于 # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置,默认回车即可原文地址:https://www.cnblogs.com/shangxiaofei/p/9429512.htm

使用VS Code搭建Vue.js项目

1.安装node.js.详细步骤:https://www.runoob.com/nodejs/nodejs-install-setup.html 2.更新npm版本,在命令窗口输入,如下所示 npm install npm -g 3.安装VS Code.详细步骤:https://blog.csdn.net/Calvin_zhou/article/details/78487121 4.安装Vue脚手架,命令窗口输入 npm install -g @vue/cli 5.打开VS Code并打开一个你

使用Vue-cli 3.x搭建Vue项目

一.Vue-cli 3.x安装 Node 版本要求:Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli 查版本是否正确 (3.x): vue --version 官方安装文档:https://cli.vuejs.org/zh/guide/installation.html 二.创建一个项目以搭建一个项目名称为vue-test的Vue前端项目为例 1.在cmd下运行以下命令创建项目 vue create vue-te

vue+webpack项目结构介绍

对vue已经有了一定的了解,所以希望可以在github上找到一些项目实践,但是无奈不知道vue的整体架构是如何的,往往不知道该如何着手看,所以这里在网上找了相关的文章作为参考,对结构有一个大致的了解.参考文章如下: 用vue+webpack搭建的前端项目结构 vue+webpack项目实践这里插一句话,搜索谷歌做的确实好,支持原创,搜索精准,不知道比度娘高到哪里去~