精华内容
下载资源
问答
  • vue新建项目

    千次阅读 2018-07-19 11:32:08
    一、前提: 安装node(使用它的包管理工具npm);...二、新建项目: 1. 在指点目录下使用命令vue init webpack 项目名称 2. cd 进入项目文件夹,使用命令:cnpm install 安装依赖文件 3. ...

    一、前提:

    安装node(使用它的包管理工具npm);

    全局安装cnpm(npm比较慢,但也可以省略该步骤);

    全局安装vue脚手架工具vue-cli(命令:npm install -g vue-cli )

    二、新建项目:

    1. 在指点目录下使用命令:vue init  webpack 项目名称

    2. cd 进入项目文件夹,使用命令:cnpm install 安装依赖文件

    3. 运行命令:cnpm run dev 即可运行项目(默认端口为8080)

    三、集成常用库

    1. vue中集成element-ui

    • 安装:cnpm install element-ui -S
    • 整体环境:在项目的main.js中加入以下内容                
      • import ElementUI from 'element-ui'

        import 'element-ui/lib/theme-chalk/index.css'

        Vue.use(ElementUI)

      • 注意:如果需要重置ElementUI或者html的默认css,可以在Vue.use(ElementUI)之前引入,一边全局使用

      • 如:

                        import ElementUI from 'element-ui'

                        import 'element-ui/lib/theme-chalk/index.css'

                        import '@/styles/reset.css' //重置样式

                        import '@/styles/reElement.css' //重置element样式

                        import '@/styles/common.css' //共用样式

                        Vue.use(ElementUI)

    2. vue 中集成sass

    • 项目开发依赖安装:cnpm install node-sass --save-dev; cnpm install sass-loader --save-dev
    • 打开webpack.base.config.js 在loaders里面加上  module -- rules(这里没加我也能用,知道原因的告诉我以下,谢谢!
    • {

          test: /\.scss$/,

          loaders: ["style", "css", "sass"]

       },

    • 页面中使用:<style lang="scss" scoped="" type="text/css"></style>

    3. vue中集成jquery

    • 安装:cnpm install jquery --save
    • webpack配置:build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用并在module.exports中添加一段代码
    • 引入webpack:const webpack = require('webpack') 

      • plugins: [ 

        new webpack.ProvidePlugin({

        $: "jquery",

        jQuery: "jquery",

        jquery: "jquery",

        "window.jQuery": "jquery"

        })

        ],

    • 添加代码:

    • 全局引入:在main.js里引入:import 'jquery'      ===>>> 这样可以全局使用,也可以在要使用的页面中单独引入

    • 引入之后便可使用$;组件中测试可使用:console.log($('选择器'))

    以上是我在配置环境时集成第三方库的过程。

     

    文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

     

     

    展开全文
  • vue 新建项目流程

    2018-05-09 18:02:25
    1. 下载node,安装直接下一步操作就按装完成,在cmd命令行查看node -v版本和npm -v版本(node安装完成时就安装了npm)。...新建vue项目目录,(进入某盘符直接盘符加冒号,例如e: 进入e盘,进入新建vue项目目录,cd...

    1. 下载node,安装直接下一步操作就按装完成,在cmd命令行查看node -v版本和npm -v版本(node安装完成时就安装了npm)。

    2.输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,安装淘宝镜像安装相关依赖

    3.新建vue项目目录,(进入某盘符直接盘符加冒号,例如e: 进入e盘,进入新建vue项目目录,cd 进入某文件夹)

    4.安装vue-cli脚手架构建工具,输入命令 npm install -g vue-cli,安装完成即可

    5.用脚手架新建工程目录 vue init  webpack +项目名称(在控制台输入CHCP 65001,按回车键即可将编码格式设成utf-8,再创建就不会乱码了


    解决乱码(自己感觉这一步没什么关系)

    6.接下来就是询问项目的相关配置。一路yes省事儿没啥问题(会需要一段时间)

    7.cd 工程名,进入到新建的项目目录文件夹下面

    8.运行项目,指令npm run dev 看到如下提示就运行成功了 ,在浏览器中输入localhost:8080就可以看到运行结果


    以上大致流程如下:


    vue项目大致结构


    小案列:main.js

     

    import Vue from 'vue'

    // Vue.component('my-header', {
    // template: '<p>this is my header</p>'
    // })
    var myHeaderChile = {
    template: '<p> i am header child</p>'
    }

    // eslint-disable-line
    var myHeader = {
    template: '<p>this is my header <my-header-child></my-header-child></p>',
    components: {
    'my-header-child' : myHeaderChile
    },
    data: function () { // 组件中的data需要是function来return我们所需要的数据,以免有一个组件数据改变影响其他相同组件的数据
    return {
    d: 1,
    f: 2
    }
    }
    }

    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    data: {
    word: ' hello world! '
    },
    components: {
    'my-header' : myHeader
    }
    })

     运行结果:


    如何引入外部组件:

    main.js

    import Vue from 'vue' // 从node-module引入的vue实例
    import App from './App' // 当前目录中引入的app跟组件

    new Vue({
    el: '#app',
    data: {
    word: ' hello world! '
    },
    // render: h => h(App)
    render: function ( h) { // vue2.0引入外部的组件必须使用render函数进行渲染
    return h( App)
    }
    })


    App.vue

    < template >
    < div >
    {{ hello}}
    </ div >
    </ template >

    < script >
    export default {
    data () {
    return {
    hello: 'world2'
    }
    }
    }
    </ script >

    运行结果




    9.简述用脚手架(vue-cli)建立项目的优点

    • 成熟的vue项目架构设计
    • 本地测试服务器
    •  集成打包上线方案

        使用vue-cli系统要求

    • Node.js(大于或等于4.X)
    • git(用于下载代码)
    •  一个可以使用node命令的终端
    展开全文
  • Vue新建项目详细流程

    2020-10-24 11:58:43
    由于目前大部分主流前后端方向的整合用到的技术栈还是SpringBoot+Vue,再加上Vue3.0正式版才刚刚出一个月,还没有普及。 因此特来先写一篇文章暂时记录一下Vue2新手入门,方便大家未来转向3少走过多的弯路。 第一步...
    • 由于目前大部分主流前后端方向的整合用到的技术栈还是SpringBoot+Vue,再加上Vue3.0正式版才刚刚出一个月,还没有普及。
    • 因此特来先写一篇文章暂时记录一下Vue2新手入门,方便大家未来转向3少走过多的弯路。

    第一步:需要安装npm即Node.js

    蓝奏云网盘下载链接

    • 双击打开压缩包内的 node-v12.19.0-x64.msi 进行安装,在安装界面一直Next,直到Finish完成安装。
    • 管理员权限打开控制命令行程序(CMD),输入 node -v 以及 npm -v 来检查是否安装正常
    • 正常的则会显示当前安装版本号

    第二步:使用淘宝NPM 镜像

    • 国内直接使用npm的官方镜像是非常慢的,这里推荐使用淘宝的npm镜像。
    • 管理员权限打开控制命令行程序(CMD),输入指令 npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 这样就可以使用cnpm 命令来安装模块了,能节省一些时间

    第三步:Vue项目初始化
    1.第一步:全局安装vue-cli指令

    cnpm install vue-cli -g

    查看vue-cli是否安装成功,需要输入指令vue list

    在这里插入图片描述

    出现上图则说明安装成功了!

    选定路径,新建vue项目,这里我是在桌面上新建了sun文件夹,cd目录路径

    下面以项目名为hello-vue新建vue项目

    输入指令 vue init webpack hello-vue 即 vue init webpack ”项目名称“

    会进行下载模板资源,网络尽量不要断开!

    手动创建可以直接按4个回车进行下一步。其中第一行默认为上面指令赋予的项目名称,第二行为描述,第三行为作者名,可为空

    在这里插入图片描述

    接着一路输入n,拒绝自动生成,手动创建先了解一下项目构架
    在这里插入图片描述

    现在已经创建好了,那就让项目先安装依赖,操作指令是:cnpm install

    接着再去运行当前项目,操作指令是cnpm run dev

    期间会有个webpack打包加载过程,若是没能运行成功,输入

    npm install --save-dev webpack 指令安装一下webpack再运行即可。

    运行成功则会显示当前运行在某个端口上,默认一般为8080端口
    运行结果图
    默认工程结构多余部分可删除
    其中两个文件可删除,部分代码可删减
    在这里插入图片描述

    其中App.vue文件内源代码可删减为

    ​ ​

    必经之路

    用别人的东西那肯定得去别人的官网学习全面才能走向熟悉精通程度,当然后端开发人员只要看得懂即可, 点击跳转vue官网
    引用element-ui(饿了么开发框架组件)环境之路

    新建工程输入指令流程:
    1.我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件
    
    2.新建工程 vue ini webpack hi-vue
    
    3.接着需要安装vue-router,npm install vue-router --save -dev
    
    4.安装element-ui,npm i element-ui -S
    
    5.安装依赖,npm install
    
    6.安装SASS加载器,cnpm install sass-loader node-sass --save -dev
    
    7.启动测试,npm run dev
    

    注意:期间若是安装失败却在运行时才发现,且已经找不到问题根源,可关闭cmd并且删除当前文件夹内所有资源,重新打开cmd,cd进入工程目录执行上述命令行即可。

    展开全文
  • 新建vue项目命令操作

    千次阅读 2018-08-15 14:25:45
    在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org(国内太慢使用淘宝镜会快很多) cnpm install -g vue-cli  vue init webpack firstVue cd firstVue ...命令npm insta...

    在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org(国内太慢使用淘宝镜会快很多)

    cnpm install -g vue-cli 

    vue init webpack firstVue

    cd firstVue

    npm install

    npm run dev

    安装less依赖,

    命令npm install less less-loader --save

    修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加

    { test: /\.less$/, loader: "style-loader!css-loader!less-loader", },

     

    <style lang="less" scoped></style>

    1.项目里安装vux 
      npm install vux --save 
      2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置) 
      npm install vux-loader --save-dev 
      3.安装less-loader 
      npm install less less-loader --save-dev 
      安装完成记得在webpack.base.conf.js里做如下配置,在extensions里加入less

    vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:

    const vuxLoader = require('vux-loader')
    const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
    
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins: ['vux-ui']
    })
    # 全局安装 vue-cli
    $ cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 这里需要进行一些配置,默认回车即可
    This will install Vue 2.x version of the template.
    
    For Vue 1.x use: vue init webpack#1.0 my-project
    
    ? Project name my-project
    ? Project description A Vue.js project
    ? Author runoob <test@runoob.com>
    ? Vue build standalone
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? Yes
    
       vue-cli · Generated "my-project".
    
       To get started:
       
         cd my-project
         npm install
         npm run dev
       
       Documentation can be found at https://vuejs-templates.github.io/webpack
    $ cd my-project
    $ cnpm install
    $ cnpm run dev
     DONE  Compiled successfully in 4388ms
    
    > Listening at http://localhost:8080
    展开全文
  • 我们在之前搭建一个vue项目直接按照vue官方文档里面的安装指示 npm install -g vue-cli vue init webpack my-project 这两行代码是指引我们创建一个vue项目,可是尴尬的是,现在vue-cli好像不好使了。 后来仔细...
  • 一、下载nodejs 然后node -v 查看版本 ...新建文件夹demo 并切换到demo中打开命令 vue init webpack 项目名 注意几项需要选择no的模式 切换项目文件夹中,npm i 然后运行npm run dev,安装成功 ...
  • vue新建项目(四)项目部署

    千次阅读 2017-05-27 10:40:56
    项目预览地址http://manage.hgdqdev.cn/。这里我已经写了一些页面。项目目录github: ...npm run dev构建生产// 执行构建命令,生成的dist文件夹放在服务器下即可访问 npm run build## 目录结构
  • 拷备项目:git clone <仓库地址> 创建分支:git branch 创建并进入分支:git checkout-b (checkout也可以?) 切分支:git checkout . 查看状态:git status 添加所有文件:git add. 提交:gitcommit-m’这里...
  • vue init webpack huhuf cd huhuf cnpm run dev
  • vue-cli2和vue-cli3新建项目的常用命令 1、安装vue-cli2脚手架 (1)在cmd命令行中输入脚手架安装命令(win+R打开cmd或Windows PowerShell); (2)全局安装vue2脚手架:npm install -g vue-cli 或者指定版本:npm i ...
  • vue入门新建vue项目

    2017-10-13 15:19:10
    vue入门新建vue项目 原创 2017年04月14日 09:58:54 2245 0 0 首先要安装好node.js,然后才可以用vue。 设置淘宝镜像:大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里...
  • vue项目新建 全局安装vue-cli vue-cli安装 npm install vue-cli -g vue-cli的版本查看 vue -V vue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装...
  • vue3项目新建

    2019-11-28 10:45:37
    一. 全局安装vue3 二. 新建项目 三. 启动项目 四. 简单封装
  • 新建Vue2项目

    2021-06-30 17:57:20
    win+R打开任务管理器,输入以下命令,打开可视化Vue项目管理器。 vue ui 1.在Vue项目管理器中,选择“创建” 2.在创建栏中,选择新建Vue项目的根目录并确定 3.输入项目名称(项目文件夹)后直接点击“下一步” 4...
  • vue利用vue ui命令创建项目

    万次阅读 多人点赞 2019-03-07 21:29:53
    vue的官方脚手架是vue-cli,但它已经很久没有大版本更新了,最近发布的vue-cli 3.x ,新增的...注意,vue-cli 3.x已经收归到vue项目下了,所以,直接输入 vue -h 可以看到: 此时我们运行命令 vue ui , 就会启动...
  • 新建vue项目

    2021-01-07 11:46:09
    3.输入 vue init webpack ”项目名称“ 命令新建vue项目 我的新建vue项目名称为 onevue 4.创建成功 cd到 onevue目录 然后npm install 安装依赖(简写npm i) 5.npm run dev 运行项目 就行了 ...
  • vue创建项目命令

    千次阅读 2018-08-02 21:10:03
    python: pycharm 前端: hbuilder ...vue的入门(vue 创建项目命令)  (-g 全局)  npm install -g vue-cli  vue list  cd Desktop  vue init webpack vue-music    cd vue-music  npm run ...
  • vue新建一个项目

    千次阅读 2020-08-31 17:06:50
    判断是否安装好 node -v(检查版本号) npm -v (检查是否安装npm) ...创建vue项目 1、cnpm install -g @vue/cli 2、vue create my-project 按键盘上下键选择默认(default)还是手动(Manually),如果选择defa
  • 3. 在想要创建vue项目的目录下,按住shift+右键,选择在此处打开命令行窗口。 4. 运行命令vue init webpack 5. 运行命令:npm install 6. 在所有命令运行完毕后,用npm run dev命令启动...
  • vue环境搭建及vue新建一个项目 一、vue开发环境搭建 1、安装nodejs 步骤:在node官网(https://nodejs.org/en/download/ )选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,在cmd控制台输入node -v,如果...
  • 为了加快安装速度,可以选择切换npm镜像地址 npm i nrm -g // 安装...新建项目命令(记得在需要新建项目的目录下运行命令哦) vue create 项目名称 安装完成后的效果 接下来运行提示命令就可以将项目跑起来啦 ...
  • 1.创建vue项目遇到的问题 npm和cnpm不在同一目录下,所以npm指向淘宝镜像时,cnpm -v 会报cnpm不是内部或外部命令,也不是可运行的程序或批处理文件,此时要去配置环境变量,将cnpm所在目录加入到path中。 D:\...
  • 1,3.0去除了 static, config , build 文件夹 2,新增了 public 3,自动依赖 node_modules 4,默认配置 webpack , 通过 vue.config.js来修改 ...7,浏览器打开图形界面管理项目 ,命令 " vue ui " 查看 ...
  • Vue新建一个demo项目

    2019-09-12 16:03:22
    Vue新建一个demo项目 Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 1.安装node.js ...
  • 新建vuecli项目

    2020-05-13 00:03:43
    1.先安装Node.js,附带有npm 2.打开一个文件夹,在终端输入安装vuecli指令 npm install -g @vue/cli # OR yarn global add @vue/cli 2.1如果你已经全局安装了旧版本的 vue-...3.项目初始化设置项目名字以及安装webpac
  • Vue 无模板新建项目

    2020-02-25 20:32:22
    2.在这个文件路径下打开cmd.exe,并运行命令vue init webpack xxx(项目名称),选择你需要的项 3.等待下载完毕 4.如图所示。按照提示yici3输入命令cd testvue2/npm run dev 5.现在可以看到我们建的文件夹下面的...
  • 新建vue-cli项目

    2020-08-18 08:38:19
    命令提示符(黑窗口)新建1.1 在指定目录打开命令提示符1.2 输入新建vue-cli项目命令1.3 选择项目需要的配置2. vue ui 新建(vue-cli 3以上) 1. 命令提示符(黑窗口)新建 1.1 在指定目录打开命令提示符 在地址栏...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,174
精华内容 6,869
关键字:

vue新建项目命令

vue 订阅