精华内容
下载资源
问答
  • vue脚手架搭建项目

    2019-12-14 10:33:14
    vue脚手架搭建项目 1,npm install @vue/cli -g------全局安装 2,vue -V-------------------查看vue的脚手架工具版本 随便新建一个文件夹 3,cd 文件夹路径-----------切换到这个文件夹 4,vue create 项目名 -----...

    vue脚手架搭建项目

    1,npm install @vue/cli -g------全局安装
    2,vue -V-------------------查看vue的脚手架工具版本
    随便新建一个文件夹
    3,cd 文件夹路径-----------切换到这个文件夹
    4,vue create 项目名 ------通过脚手架工具创建项目----
    5,选default (babel , eslint) 回车
    6,cd 项目名 ----------------进入到项目目录
    7,npm run server----------运行
    8、将给出的链接复制到浏览器打开查看是否正确(有vue图标)
    搭建成功

    展开全文
  • Vue脚手架搭建项目

    2019-10-09 09:45:30
    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $...

    全局安装vue脚手架

    $ npm install -g vue-cli

    卸载方法

    $ npm uninstall -g vue-cli

    查看vue版本(注意:大写的V)

    $ vue -V

    创建项目

    $ vue init webpack vue-app

    ? Project name vue-app

    ? Project description Vue Project

    ? Author ProsperLee <lcsshengsss@outlook.com>

    ? Vue build (Use arrow keys)

    > Runtime Compiler: recommended for most users

    Runtime-only: about 6KB lighter min gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

    ? Install vue-router? No

    ? Use ESLint to lint your code? No? Set up unit tests No

    ? Setup e2e tests with Nightwatch? No

    ? Should we run `npm install` for you after the project has been created? (recommended)

    (Use arrow keys)

    > Yes, use NPM

      Yes, use Yarn

      No, I will handle that myself

    项目根目录下执行:

    $ npm run dev

    Your application is running here: http://localhost:8080

    安装路由

    $ npm install vue-router --save-dev

    安装vue-resource

    $ npm install vue-resource --save-dev

    安装WangEditor

    $ npm install wangeditor --save-dev

    打包项目

    $ npm run dev


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • 安装脚手架node 版本要求: > 8.9 。关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉。卸载旧版本运行:``npm uninstall vue-cli -g`` 或 ``yarn global remove vue-cli``...

    ec8ad7ba0b8086ed3c18eb8483c93e4e.png

    安装脚手架

    node 版本要求: > 8.9 。

    关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉。

    卸载旧版本运行:``npm uninstall vue-cli -g`` 或 ``yarn global remove vue-cli``。

    安装@vue/cli:npm install -g @vue/cli yarn global add @vue/cli

    安装之后,可以在命令行中访问vue命令。

    检查版本是否正确:vue --version。

    快速原型开发 (仅用于学习):(安装)npm install -g @vue/cli-service-global 或 yarn global add @vue/cli-service-global 。

    安装vscode插件Vetur:用于高亮.vue文件代码。

    利用vue脚手架搭建项目

    第一种方法:

    使用vue命令搭建:vue create 项目名

    注意:项目名不能有大写字母,否则会报错。

    搭建项目时,需要我们选择一系列选项:

    1、? Please pick a preset: (Use arrow keys) 请选择一个预设:(使用方向键)
    > default (babel, eslint) 默认(bable, eslint)
    Manually select features 手动选择功能
    • 选择Manually select features
    2、? Check the features needed for your project: (Press <space> to select, <
    a> to toggle all, <i> to invert selection) 检查项目所需的特性:(按<空格>选择,<
    a>切换全部,<i>反转选择)。
    >(*) Babel
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    ( ) Router
    ( ) Vuex
    ( ) CSS Pre-processors
    (*) Linter / Formatter
    ( ) Unit Testing
    ( ) E2E Testing
    • 项目需要什么特性就选择什么特性
    3、? Use history mode for router? (Requires proper server setup for index fa
    llback in production) (Y/n) 路由器使用历史记录模式?
    • Y/n
    4、Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow
    keys) 配置放在哪里?
    > In dedicated config files 专用配置文件
    In package.json 在package.json文件
    • In package.json
    5、? Save this as a preset for future projects? (y/N) 将其保存为未来项目的预置?
    • y/N

    然后项目就搭建完成了。

    怎样使用呢?

    cd 项目名:进入到你创建的项目

    npm run serve:开启服务器,拿到服务地址,在浏览器打开服务地址。

    第二种方法:

    使用 vue ui 命令来搭建

    使用 vue ui 命令后,会自动打开一个Vue 项目管理器网页,然后我们手动搭建项目就行了。

    创建 -> 在此创建新项目 -> 输入项目名 -> 选择一套预设 -> ? Use history mode for router? (Requires proper server setup for index fa
    llback in production) -> 创建项目 -> 保存预设 -> 任务、serve、启动app 。

    小知识

    如何删除预设呢?

    找到 .vuerc 文件:C盘 -> 用户 -> 29215 -> .vuerc

    删除 presets 对象下的字段。

    展开全文
  • 安装Node.jsVue脚手架是依赖于node.js的,所以无论是安装新版本还是旧版本,我们都要安装node.js只以windows系统版本为例,其他操作系统请自行下载安装。Node.js 安装包及源码下载地址为:...

    安装Node.js

    Vue的脚手架是依赖于node.js的,所以无论是安装新版本还是旧版本,我们都要安装node.js

    只以windows系统版本为例,其他操作系统请自行下载安装。

    Node.js 安装包及源码下载地址为https://nodejs.org/en/download/

    e1840a6ce9b9023c0f6288fe241fe577.png

    Node.js安装过程(傻瓜式安装):

    步骤 1 : 双击下载后的安装包 v12.19.0,出现如下图所示:

    004c0851ce7ae595bcecd31652d954a9.png

    步骤 2 : 点击 Next(下一步),出现如下图勾选接受协议选项,然后点击Next按钮 :

    99a4ddb5a349c766cf72cf8925d638ea.png

    步骤 3 : Node.js默认安装目录为 "C:\nodejs\" , 你可以修改安装路径,并点击 Next(下一步):

    a16bd853134cdc3eebd5dedf36fc79df.png

    步骤 4 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 Next(下一步)

    85fa774013514529fb2e5e098cda94b3.png

    步骤5:直接点击Next下一步即可

    8ba9e90987ef6860346d12fd48d7b4e4.png

    步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

    aedd000f136b771b8723b29abd1cd1d5.png

    步骤7:等待安装过程,然后点击完成安装即可

    f180731add5e061e84a7272318c717b8.png

    注:完成安装后,将安装路径添加到环境变量中即可进行全局访问

    验证是否安装成功:cmd中输入:node --version,出现如下图即表明安装成功

    3e2265c80cee4b58ebd3cc3980e10d65.png

    npm(node package manager)是node的包管理工具,我们在后面主要是使用npm来搭建脚手架和安装一些常用的组件。

    由于现在版本的nodejs已经集成npm所以无需安装,node.js成功安装之后,npm一并安装成功,这个时候我们可以打开cmd窗口,输入 node --version 和 npm --version 来查看node.js和npm的版本,如果能够显示出版本,说明已经安装成功。

    c29857f5ee2df56aa0faf226432e8848.png

    安装cnpm

    安装cnpm代替npm,安装命令如下:

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

    其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,因为使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以使用cnpm稳一点。

    注意:如果你发现你安装成功了,使用cnpm却发现找不到命令,就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\\nodejs\node_modules"

    出现以下内容则表示cnpm安装成功:

    5e782ec4c20b8ca26fea50657035fccf.png

    安装VUE脚手架vue-cli

    全局安装 vue-cli ,在命令提示窗口执行:

    cnpm install -g vue-cli

    安装成功后使用vue --version即可验证是否够安装成功,出现如下图即表明安装成。

    3e7aa29035fff3e711b46118358b10ba.png

    创建VUE项目

    安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:

    vue init webpack my-project

    cd到对应的目录下初始化vue项目,执行一下命令:

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

    80d53876ae9074c34e51e5b2582e550d.png

    完成以上即会在指定的目录下生成vue的文件目录如下:

    f27d37d8191f0cb4f088a28d834e0da0.png

    生成文件目录后,使用 cnpm 安装依赖,命令如下:

    cnpm install

    6e115d6c50c6718b0b8befecc4804249.png

    安装依赖完成过后,使用如下命令进行启动项目:

    npm run dev

    340f54932e20e2d1f8d1751df8e5b9e8.png

    目录结构及其对应作用

    通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

    ├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境│   └── ...├── config/                     │   ├── index.js                # 项目核心配置│   └── ...├ ── node_module/               #项目中安装的依赖模块   ── src/│   ├── main.js                 # 程序入口文件│   ├── App.vue                 # 程序入口vue组件│   ├── components/             # 组件│   │   └── ...│   └── assets/                 # 资源文件夹,一般放一些静态资源文件│       └── ...├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)├── test/│   └── unit/                   # 单元测试│   │   ├── specs/              # 测试规范│   │   ├── index.js            # 测试入口文件│   │   └── karma.conf.js       # 测试运行配置文件│   └── e2e/                    # 端到端测试│   │   ├── specs/              # 测试规范│   │   ├── custom-assertions/  # 端到端测试自定义断言│   │   ├── runner.js           # 运行测试的脚本│   │   └── nightwatch.conf.js  # 运行测试的配置文件├── .babelrc                    # babel 配置文件├── .editorconfig               # 编辑配置文件├── .gitignore                  # 用来过滤一些版本控制的文件,比如node_modules文件夹 ├── index.html                  # index.html 入口模板文件└── package.json                # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 └── README.md                   #介绍自己这个项目的,可参照github上star多的项目。build/
    展开全文
  • 主要介绍了vue脚手架搭建项目的兼容性配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在前端的知识海洋里,各种前端框架自动化测试满天飞,正如在当下想不被淘汰,那只有不断的去学习心得知识,所以就有了今天的一次学习... 第二步:要搭建vue脚手架工程项目,首先的需要安装node.js二话不说送上传送门...
  • 使用vue脚手架搭建项目使用vue脚手架搭建项目全局配置vue脚手架依赖初始化vue项目目录介绍初步使用设置vscode生成vue组件快捷指令路由和组件修改成简单的后台管理demo使用element-ui 使用vue脚手架搭建项目 全局配置...
  • 使用vue脚手架搭建项目 Vue项目开发实战系列 主要内容: 初识vues 升级到vue cli4.0 从零开始配置vue cli4.0 使用vue cli4.0创建项目 1 初识vue 1.1 Vue概述 我们就直接开门见山,看看Vue的官网吧: Vue官网: ...
  • 使用vue脚手架搭建项目详解

    千次阅读 2020-02-24 09:44:12
    安装vue脚手架 这里的版本是vue cli4 cnpm i @vue/cli -g 启动vue脚手架图形化界面 打开命令行,输入以下命令 vue ui 通过vue脚手架图形化界面创建项目 选择项目目录 ...
  • 今天在用vue脚手架搭建项目完成后,用npm install下载node-modules文件时报错 解决方法: 1,首先执行npm cache clean --force 命令 2, 再执行 npm install 命令 3, 此时npm run dev就能运行了 ...
  • Vue 脚手架(vue-cli) 的环境搭建 关于Vue 脚手架(vue-cli) vue 脚手架指的是 vue-cli 它是 vue 官方提供的一个快速构建单页面(SPA)环境配置的工具,cli 就是(command-line-interface ) 命令行界面。 vue 脚手架...
  • 1.vue脚手架搭建项目

    2019-09-24 05:36:23
    在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli。 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/vue 3.开始创建项目: vue init webpack youprogectName ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,670
精华内容 1,868
关键字:

vue脚手架搭建项目

vue 订阅