zoukankan      html  css  js  c++  java
  • 新手学习VUE——环境搭建及创建项目

    第一种方式:

    1.     下载安装node.js

        检查是否成功:node-v或npm-v

    2..搭建项目:

        第一种方法:用iview脚手架建项目

            打开iview官网==>生态 ===>iview cli==>进行下载iview脚手架,

        下载后进行创建项目

        第二种方法:命令行进行创建

            (1).npm install -gvue-cli                       //全局安装vue-cli

            (2).npm install -g webpack                          //全局安装webpack

            (3).(npm)npm install -gwebpack-dev-server             //安装webpack的本地webserver

            (4).npm install --save iview                     //下载iveiw组件库

            (5).npm install axios    npminstall --save vue-axios  //下载axios

            (6).cnpm install element-ui --save

            (7).vue initwebpack  项目名      //搭建项目(你想把项目发到那,就切换到那块下载)

             

    3.切换到你所在的项目,运行项目npm run dev

    4.编辑项目时,我建议用HBuilder

    5.下载好后,项目如下图所示:

    6.比较关心的的几个文件:

        src下的assets:存放静态文件

        src下的components:写页面

        src下的router下的index.js:配置路由

        src下的main.js:前端的主入口,主要是写配置。

        对于新引进来的东西,需要在index.js和main.js下引用才方可使用。

    如果觉得npm速度不快,可下载cnpm

    (npm install -g cnpm-registry=http://registry.npm.taobao.org)

    第二种方式:

    1.检测是否安装好nodejs和npm
    检测命令

        node -v

        npm -v

    如果没有安装需要先安装

    nodejs的下载路径:https://nodejs.org/en/download/

    在Windows上安装时务必选择全部组件,包括勾选Add toPath。

    安装完成后,在Windows环境下,请打开命令提示符,

    idea cmd窗口

    然后输入node -v,如果安装正常,你应该看到  版本号输出:

    检查nodejs是否安装成功

    npm是Node.js的包管理工具(package manager),Nodejs的安装程序默认安装npm,在命令提示符或者终端输入npm -v,可以看到类似以下的输出:

    检查npm

    在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 

    输入npm i -g cnpm --registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了,如果权限不够,请使用管理员运行命令提示符

    安装淘宝npm镜像

    2.安装vue-cli,vue脚手架
    使用如下命令

        cnpm i -g vue-cli

    安装vue-cli

        测试是否安装成功:vue -V

    检查vue是否安装成功

    3.项目安装和创建
    (1).安装项目
    首先进入工作目录(如果不在工作目录),使用cd 命令

    进入工作目录

    使用脚手架安装项目:

    vue init webpack first_vue 

    控制台显示:

    提示目录已存在,是否继续:Y

    Project name(工程名):回车

    Project description(工程介绍):回车

    Author:作者名

    Vue build(是否安装编译器):回车

    Install vue-router(是否安装Vue路由):回车

    Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n

    Set up unit tests(安装测试工具):n

    Setup e2e tests with Nightwatch(测试相关):n

    Should we run `npm install` for you after the project hasbeen created? (recommended):选择:No, I will handle thatmyself

    (2).初始化项目
    进入项目目录

        cd firstVue

    初始化项目

        cnpm i

    项目目录结构

    运行项目

        cnpm run dev

    浏览器打开:localhost:8080,即可打开vue项目

    Ctrl+C退出运行

    4. 配置idea
    File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认

    File - Settings - Plugins:搜索vue,安装Vue.js

    Run - Edit Configurations...:点击加号,选择npm,Name为Run,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了

    继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。

    5.安装使用stylus(是一种健壮的css)
    cnpm install --save-dev stylus stylus-loader

  • 相关阅读:
    Java中的几种常用循环 for switch while dowhile
    HTML的各种基本标签
    2017年终总结
    HTML C# ajax结合ashx处理程序实现文件上传
    HTML div鼠标悬停控制子控件显示与隐藏
    HTML 使用CSS 如何去掉文本聚焦框
    HTML input 文本框如何添加提示信息
    CSS 如何通过top left 定位控制div在另一个div的位置
    CSS background 属性
    php支付接口开发-支付宝-开发前期准备
  • 原文地址:https://www.cnblogs.com/typ1805/p/10106802.html
Copyright © 2011-2022 走看看