Vue项目环境配置以及搭建项目、启动项目

亦凉 2022-04-05 03:16 540阅读 0赞

一、安装软件及相关插件

1、先安装nodejs,这里不多说下面两个进行验证安装是否成功

  1. node -v
  2. npm -v

2、然后安装淘宝镜像

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

3、运行下面进行查看是否安装成功

  1. cnpm -v

4、接着安装webpage

  1. npm install webpack -g

5、再安装vue-cli脚手架

  1. npm install vue-cli -g

二、创建项目

1、选择一个文件夹作为存放项目文件的父级文件夹然后按住Shift右键点击该文件夹，选择在此处打开命令窗口

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70

2、在打开的窗口中输入vue init webpack + 项目名 (如下图)，遇到有闪烁的光标回车

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1

发现这个以为出错了，后来回车一下就好了

接着后面执行开始创建

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2

3、创建好项目之后，使用webstrom打开vue项目

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3

4、启动项目，项目中若有node_modules文件夹，先删除，然后分别执行

npm install或者cnpm install（安装依赖）

推荐使用cnpm install

npm run dev（开发环境启动项目）

npm run build（打包项目）

发表评论

表情：
评论列表 （有 0 条评论，540人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue项目环境搭建

    [vue-用Vue-cli从零开始搭建一个Vue项目][vue-_Vue-cli_Vue] 　　Vue是近两年来比较火的一个前端框架（渐进式框架吧）。 Vue两大核心思想

    小咪咪小咪咪/ 0 赞/ 517 阅读

    相关 vue环境项目启动

    在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 410 阅读