美文网首页
vue开始一个项目

vue开始一个项目

作者: 夜凉听风雨 | 来源:发表于2021-04-08 18:41 被阅读0次

参考博客:https://www.runoob.com/w3cnote/vue2-start-coding.html

我是mac电脑

先确保电脑中已经安装了npm 并且使用npm安装过了node。 如果没有,可以参考另一篇文章: https://www.jianshu.com/p/2352a2b4cb14

安装webpacket

执行命令 npm install webpack -g

安装脚手架 vue-cli

执行命令npm install @vue/cli -g

创建项目

在硬盘上找一个文件夹放工程用的,在终端中进入该目录
cd 目录路径

vue create <project-name>
根据提示完成创建

image.png

现在比较流行这样的创建方式,再自己配置一个vue.config.js文件。vue.config.js文件配置可以参考文章:https://www.jianshu.com/p/b358a91bdf2d

创建完成后如下图所示结构:

image.png

启动项目

终端来到此项目文件夹,使用命令npm run serve启动服务器

image.png

启动后复制链接 http://localhost:8080/ 或者http://10.10.30.88:8080/ 到浏览器打开。 也可以在同一个局域网内的其他设备上用浏览器打开链接http://10.10.30.88:8080/


下面的使用模板创建可以选择不看!!!!

根据模板创建项目(需要vue-cli 3.0以下版本 或者安装vue-cli-init)

vue init <template-name> <project-name不能用中文>

从而自动生成的项目模板,比较常用的模板有webpack、webpack-simple、browserify等模板。

下面使用 vue init webpack test 命令来创建一个基于 webpack 模板的新项目

会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 写你自己的名字

命令行实例:

image.png

Project name ==> 工程名 回车即可
Project description ==> 工程描述 回车即可
Author ==> 作者 随便填一下
Vue build ==> 打包方式,回车即可;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
Should we run npm install for you after the project has been created? ==> 是否使用npm安装依赖 回车即可

cd 命令进入创建的工程目录
安装 vue 路由模块vue-router和网络请求模块vue-resource
npm install vue-router vue-resource --save

启动项目

npm run dev

运行成功会看到这个页面

image.png

最后就是在编译器中编写项目咯~~

相关文章

  • Vue2.X强上TypeScript

    准备 就是使用 vue-cli2.0 创建一个项目,一个正儿八经的 vue-cli2.0 的 vue 项目 开始 ...

  • H5 vue 初识

    H5 vue 初识 1 . 开始构建一个项目 使用vue init webpack test(项目文件夹名)命令初...

  • vue开始一个项目

    参考博客:https://www.runoob.com/w3cnote/vue2-start-coding.htm...

  • 从零开始搭建一个vue项目 -- vue-cli/cooking

    从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟...

  • lee-ui(vue版本)

    开始动手写vue ui库 创建vue项目 可以利用现成的vue-cli脚手架创建项目结构 到此为止,一个普通的vu...

  • 3. 开始

    创建一个vue实例 每一个vue应用,都是通过vue函数创建一个新的vue实例开始的—— 而一个项目应该由一个vu...

  • CnodeJS-Vue(一)

    创建项目 vue init webpack CnodeJS-Vue 一开始用了 vue init webpack-...

  • 慕课网 3小时速成 vue2.x 入门 学习笔记

    VueLearnDemo 最近项目中用到了 vue, 开始学习一下vue 从网上找了一个入门的教程。开始参考网上的...

  • vite + eslint + airbnb初体验

    最近写个人vue项目,最开始用的@vue/cli,起初项目规模小时还好,可是随着项目规模的增大,webpack打包...

  • vue3+element-plus配置cdn

    1,项目配置 最近在做一个项目,项目配置版本如下: vue:3.2.6 vue-router:4.0.11 vue...

网友评论

      本文标题:vue开始一个项目

      本文链接:https://www.haomeiwen.com/subject/gkvvkltx.html