Vue实践 运行Vue项目全流程创建的第一个项目

下一篇学习element

https://blog.csdn.net/qq_34168515/article/details/118636234?spm=1001.2014.3001.5502

1、选择一个文件夹

创建一个 放置项目的 的文件夹

pj_front

2、打开编辑器

建议编译器为 Visual Studio Code

3、确保 node

- 建议 v12.14.0
- 查看版本 node -v

4、安装 vue 脚手架（全局，以后不需要安装）

• 第一步

npm i -g @vue/cli

    - 确保在控制的状态（-g 全局）
    - 默认安装最新的vue脚手架版本
 
    - 注意网络问题，有可能导致安装不上，但是安装不上，千万不要灰心。再安装几次。
        - 如果实在安装不上，可以采用 npm cache clean --force 进行强制清理，清理完再重新安装
        - 清理完重新执行 npm i -g @vue/cli
        - 如果实在安装不了，可能是网络问题，使用百度淘宝cnpm的安装办法，如下面所示
            - 下面为各位同学演示淘宝cnpm的安装方法
            - npm config set registry https://registry.npm.taobao.org
            - 通过如下命令可以查看是否配置成功
                - npm config get registry
                - npm info express
            - 如果需要恢复成原来的官方地址只需要执行如下命令:
                - npm config set registry https://registry.npmjs.org
            - 使用cnpm
            - 安装淘宝的cnpm，然后在使用时直接将npm命令替换成cnpm命令即可
                - npm install -g cnpm --registry=https://registry.npm.taobao.org
            - 记得添加系统变量
            - 重新安装脚手架
                - cnpm i -g @vue/cli

5、创建项目

• 第二步

vue create ccz-vue

   - 注意，不用人配置不一样，如果可以运行 vue 命令则可以忽略 如果使用 visual studio code， 在 VSCode 编辑器上方会弹出一个选择框，选择 “Commnad Prompt”
   - 目前 vue版本为 vue3.x 学习建议从 vue2.x 开始
   - 保证在需要创建文件夹  pj_front  下
   - vue create 项目名

可以使用提前预定的快捷创建，也可以安装我以下的方法进行创建

建议 Manually select features ：自己自定义创建

安装项目:
- less：css预编译
- babel：js编译器
- route：路由用
- vuex：存储
- eslint：语法检测

注意 空格为选中， 回车为确定

选择2.x版本

选择y

选择 Sass/SCSS(with node-sass)。（大神推荐）

选择第一个（大神推荐）

选择第一个，Lint on save，保存的时候进行检测

选择第一个，避免配置混乱

选择 y

选择yes 并命名为 vue-config-first

进入安装

安装完成

79 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project ccz-vue.
�👉  Get started with the following commands:

 $ cd ccz-vue
 $ npm run serve

6、运行项目

进入项目

cd ccz-vue

运行项目

npm run server

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2840ms                                                                  20:16:48

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.105:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

7、效果

浏览器访问：http://localhost:8080/